로그인과 가입 흐름을 만드는 것은 복잡한 과정이다. 아직까지 개발자들은 모든 앱에 이런 코드들을 재 작성하고 있다. 이런 프로세스를 좀 더 쉽게 도와주기 위해, 우리는 단지 몇 줄의 코드로 다양한 로그인과 가입 옵션을 추가 할 수 있는 PFLogInViewController과 FSignUpViewController를 만들었다.
이 튜토리얼에서는 우리는 두 개의 뷰 컨트롤러의 모든것을 탐험 할 것이다. 1장에서는 델리게이터를 로그인과 가입과 연동하는 것을 배울 것이다. 2장에서는 페이스북과 트위터 로그인 흐름을 생성하여 로그인 옵션을 사용자 정의 하는 방법을 배울 것이다. 마지막 3장에서는 PFLogInViewController와PFSignUpViewController의 서브 클래스를 생성하여 뷰의 사용자 정의를 알아 볼 것이다.
튜토리얼을 시작하기 전에, 위의 링크에서 소스 코드를 다운로드 하고 함께 따라해 주길 바란다.
1. 기본적인 로그인과 가입 흐름
튜토리얼의 첫 장에서는 DefaultSettingsViewController를 다룰 것이다. 로그인과 가입 뷰 컨트롤러가 제공하는 기본적인 설정을 사용하여 표준 로그인 흐름을 구현 하였다.
1.1. 로그인 뷰 컨트롤러
예제 앱에서는, viewDidAppear 메소드에서 유저가 로그인 하지 않았을 때 PFLogInViewController가 나타는 것으로 시작한다. 여러분의 앱에서는 앱 델리케이트 또는 루트 뷰 컨트롤러에 다음 코드를 작성 해야 할 것이다.
현재 컨트롤러(DefaultSettingsViewController)를 두 개의 로그인과 가입 뷰 컨트롤러에 델리게이트로 설정하는 것을 확인 하였을 것이다. 델리게이트 메소드는 컨트롤러와 상호작용 및 이벤트 정보를 얻는데 사용될 것이다. 이 장의 마지막에서는 가능한 프로토콜 메소드 그리고 어떻게 앱에서 사용 할 수 있는 지를 살펴 볼 것이다.
PFLoginViewControllerDelegate프로토콜은 델리게이트가 선택적으로 구현가능한 4개의 옵션 메소드를 가진다. 이 튜토리얼에서는 4개 모두 살펴 볼 것이다. 그러나 여러분의 구현에서는 필요에 따라 변경할 수 있다.
첫번째로, logInViewController: shouldBeginLogInWithUsername: password:메소드가 있다. 이 메소드는 로컬 유효성 검증에 따라서 로그인 과정을 중단 할 수 있다. 예제 앱에서는, 진행 전에 아이디와 비밀번호 입력란을 모두 완료하였는지 확인하기 위해 이 메소드를 사용 한다. 만약에 하나의 필드라도 비어 있으면 UIAlertView 를 화면에 보여준다. 그리고 로그인 프로세스는 NO를 리턴해서 중단한다. 만약 로그인이 중단 된 경우, Parse API 요청을 하지 않는다.
message:@"Make sure you fill out all of the information!"
delegate:nil
cancelButtonTitle:@"ok"
otherButtonTitles:nil]show];
returnNO; // 로그인 프로세스를 중단한다.
}
두 번째 프로토콜 메소드는 사용자가 성공적으로 로그인 한 경우를 델리게이트에게 알려준다. 이번 예제 앱에서는 이전에 보여준 PFLogInViewController 를 단순하게 닫는다. 여러분의 앱에서는 프로필 사진 다운로드와 같은 로직을 수행하기 위해 이 메소드를 사용할 수 있다.
PFLogInViewControllerDelegate프로토콜의 마지막 두 개의 메소드는 로그인 접속을 실패와 좌측 상단에 '닫기' 버튼을 터치 했을 경우를 다룬다. 아래 구현된 코드에서 보이는 것 처럼, 예제 앱의 루트 뷰 컨트롤러에 로그를 보여준다. 로그인이 실패 하였을 때 얼러트 뷰를 보여줄 수도 있다. 하지만 PFLoginViewController 에서 이미 기본적으로 보여준다.
PFSignUpViewControllerDelegate프로토콜은 비슷한 설계를 따른다. 같은 페턴을 따르는 4개의 메소드를 가진다. 첫 번째로 가입 프로세스에 대한 중단으로 사용 할 수 있는 signUpViewController: shouldBeginSignUp: 메소드를 가진다. 로그인 델리게이트와 주요 차이점은 필드 정보가 키가 필드의 이름(username, password, 등)인 경우NSDictionary 로 제공된다는 점이다. 예제 앱에서는 모든 필드가 완료 되었는지 확인하기 위해 사용한다.
NSLog(@"User dismissed the signUpViewController");
}
2. 간단한 사용자 정의 및 소셜 연동
이번 장에서는 예제 앱에서 프로퍼티를 통해서 로그인 뷰 컨트롤러를 사용자 정의를 할 수 있게 해주는 PropertyConfigViewController 를 다룰 것이다. 단 몇 줄의 코드로 트위터와 페이스북 계정을 사용하여 사용하여 우리의 앱에 사용자가 가입에 필요한 모든 로그인 작업 과정을 만들 수 있다.
시작하기 전에 소셜 네트워크에 필요한 계정을 만들기 위해서 페이스북과트위터 의 설정 가이드를 살펴보아라. 두 개의 소셜 네트워크를 사용하기 위해 앱에 앱에 프로퍼티 설정 방법을 보려면 이 장에서 설명된 과정을 이 튜토리얼의 AppDelegate 에서 비교 할 수 있다.
트위터와 페이스북의 설정 과정이 어렵지만, Parse와 연동과정은 죽도록 쉽다는 것을 보장한다. 1.1장처럼 컨트롤러의 viewDidAppear메소드에서 PFLoginViewController를 보여준다. 그러나 이번에는 소셜 네트워크 로그인 지원을 하기 위해fields프로퍼티를 설정한다. 사용자이름 로그인을 사용하지 않기 때문에, 가입 뷰 컨트롤러를 필요하지 않는 것을 확인 할 수 있다. 또한 facebookPermissions 프로퍼티를 사용자가 부여 할 권한 목록에 설정한다. 이러한 전체 허가 목록은 Facebook developer website에서 찾을 수 있다.
정말 간단하다! 1.1장에서 본 같은 델리게이트 메소드를 성공, 실패, 창 닫기를 다룰 때 사용 할 수 있다.logInViewController: shouldBeginLogInWithUsername: password:델리게이트 메소드는 트위터 또는 페이스북 로그인이 사용되었을 때는 호출 되지 않는다.
다음 장에 보겠지만, 소셜 네트워크 로그인은 사용자이름과 패스워드 옵션에 상호 베타적이지 않다. 두 개 모두 공존 할 수 있고 사용자에게 여러가지 방법을 제공한다.
3. 완벽한 사용자 정의를 위해 서브클래싱하기
로그인과 가입 뷰 컨트롤러에 자신의 룩 앤 필을 주기 위해서, 서브 클래스를 할 수 있고 logInView과 signUpView 프로퍼티를 수정 할 수 있다. 이 튜토리얼의 마지막 장에서 예제 앱의 MyLogInViewController,MySignUpViewController 그리고 SubclassConfigViewController를 살펴보면서 작업의 방법을 볼 수 있다.
서브클래스의 viewDidLoad 그리고 viewDidLayoutSubviews 두 개 메소드를 오버라이딩 하면 사용자 정의를 할 수 있다. 대부분의 뷰 컨트롤러 처럼 추가와 수정하기 위해 전자를 사용한다. 후자에서 수행하는 유일한 작업은 뷰 엘리먼트의 프레임을 설정 하는 것이다. Changing the frame in theviewDidLoad메소드에서 프레임을 변경하는 것은 원하는 효과가 적용되지 않는다.
3.1. PFLogInViewController 서브클래싱하기
사용자 정의한 로그인 뷰 서브클래스인 MyLogInViewController의 viewDidLoad 메소드에서 시작한다. 뷰 컨트롤러의 logInView 프로퍼티 접근으로 대부분 변경할 수 있는 것을 확인 할 수 있다. 이 뷰는PFLogInView 종류이고 PFLogInViewController 화면에 표시되는 모든 엘리먼트를 포함한다.
배경화면을 이미지와 로고 필드에 "Parse"의 로고 대신 우리 앱의 로고로 변경한다. 배경화면 변경은 사용자이름과 패스워드 텍스트 필드 뒤의 테이블처럼 생긴 스타일을 지운다. 나중에 추가해야 한다.
다음으로 모든 버튼을 사용자 정의한 이미지로 변경한다. 예민한 사람은 몇 가지 케이스에 setImage 와setBackgroundImage 를 사용한 것을 눈치 챘을 것이다. 버튼의 image 프로퍼티는 일반적으로 텍스트를 가진 아이콘을 화면에 보여줄 때 사용한다. 반면에 backgroundImage 는 배경화면으로 사용된다. Facebook과 Twitter 버튼의 케이스에서는 아이콘 이미지를 사용하지 않는다. 그래서 image프로퍼티를nil로 한다.
그리고 이미지뷰를 테이블 처럼 보이는 텍스트 필드 배경화면을 위해서 추가한다. 또한 텍스트 필드의 텍스트 색상과 그림자를 layer와 textColor프로퍼티를 변경해서 변경한다. 반약 뷰의layer를 변경하기 위해서는 .m에 다음의 라인을 추가하여 QuartzCore를 임포트해야 한다.
#import <QuartzCore/QuartzCore.h>
우리의 로고와 버튼 이미지는 기본적인 것과 같은 크기가 아니기 때문에, 로고와 버튼 뷰의 프레임을 변경해야 한다. 이전에 말했던 것 처럼 viewDidLayoutSubviews 메소드에서 수정하면 된다.
1.3장에서 본 것 처럼 델리게이션 메소드를 사용하여 입력된 텍스트가 전화번호 인지확인하는 추가적인 검증을 수행 할 수 있다.
viewDidLayoutSubviews의 구현에서 몇 가지 프레임을 변경 할 수 있다. 버튼과 로고 이외에도, 로고를 가득 채우기 위해서 전체 폼을 아래로 이동 시키고 싶다. 이것을 위해서, 각각의 텍스트 필드의 프레임 엘리멘트를 간단하게 변경하여 아래로 이동시킨다. 텍스트 필드를 기본 값 보다 작게 만드는 목적도 있다.
완벽한 사용자 정의된 로그인과 가입 컨트롤러를 기본으로 1장과2장에서 했던 것 처럼 표시 할 수 있다. SubclassConfigViewController의 viewDidAppear:메소드에서 새로운 컨트롤러를 제공할 수 있다. .m 파일의 가장 상단에 이 뷰 컨트롤러를 임포트 한다.
이 튜토리얼에서 Parse를 사용하여 완벽하고 강력한 로그인과 가입을 생성하는 것이 얼마나 쉬운지 보았다. 1장에서는 PFLogInViewController과 PFSignUpViewController의 기본과 연관된 델리게이트 프로토콜을 다뤘다. 그리고 2장에서는 가능한 필드옵션을 살펴 보았다. 그리고 트위터와 페이스북을 사용하여 로그인 흐름을 만들었다. 마지막으로 3장에서는 서브클래싱을 통하여 완벽하게 사용자 정의 방법을 살펴 보았다.