Google+와 같은 타사 애플리케이션에서 제공하는 OAuth API를 사용하여 모바일 앱에 로그인하면 사용자에게 즐거운 첫 경험을 제공할 수 있습니다. 사용자는 이미 알고 있고 신뢰하는 계정으로 로그인하고 Google+에 입력한 데이터로 프로필을 채울 수 있습니다. 이 튜토리얼에서는 그 방법을 알아봅니다:
- 동기화 게이트웨이로 인증을 처리하는 Node.js 앱을 작성하세요.
- 카우치베이스 동기화 게이트웨이 관리자 REST API를 사용하여 사용자 및 세션을 생성합니다.
- Swift 2로 작성된 iOS 앱에 Google 로그인을 통합합니다.
- Swift에서 간단한 iOS 앱을 빌드하여 새 로그인 엔드포인트를 테스트하고 몇 가지 문서를 복제하세요.
최종 프로젝트는 다음에서 확인할 수 있습니다. GitHub.
전제 조건
이 튜토리얼의 전제 조건은 다음과 같습니다:
- Node.js
- Xcode 7+(샘플 앱을 빌드할 때 Swift 2를 사용함)
시작하기
아래 링크에서 동기화 게이트웨이를 다운로드하고 파일의 압축을 풉니다:
http://www.couchbase.com/nosql-databases/downloads
라는 새 파일에 동기화 게이트웨이-config.json를 클릭하고 다음을 붙여넣습니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "log": ["*"], "데이터베이스": { "simple-login": { "서버": "월러스:", "users": { "GUEST": { "disabled": true } }, "동기화": ` 함수(doc, oldDoc) { 채널(doc._id); 액세스(doc.user_id, doc._id); } ` } } } |
이 구성 파일에서는 다음과 같은 데이터베이스를 생성합니다. 간편 로그인 동기화 기능을 사용하여 각 문서를 다른 채널에 매핑하고 사용자에게 채널에 대한 액세스 권한을 부여합니다(채널에 저장되는 사용자 이름은 user_id
필드에 입력합니다).
다음 명령으로 동기화 게이트웨이를 시작합니다:
1 |
$ ~/다운로드/카우치베이스-동기화-게이트웨이/bin/동기화 게이트웨이 동기화-게이트웨이-구성.json |
동기화 게이트웨이용 역방향 프록시
동기화 게이트웨이를 실행하면 Google과 동기화 게이트웨이 간의 인증을 처리하기 위한 앱 서버 구축에 집중할 수 있습니다.
인기 있는 Express 모듈을 사용하여 사용자 생성 요청을 처리하고 요청 모듈을 사용하여 다른 모든 트래픽을 동기화 게이트웨이로 프록시합니다.
다음 Node.js 모듈을 설치합니다:
1 |
$ npm 설치 express body-파서 요청 --저장 |
라는 새 파일을 만듭니다. server.js 를 클릭하고 다음을 추가합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 1 var express = require('express') , bodyParser = require('body-parser') , 요청 = 요청('요청').기본값({json: true}); // 2 var 앱 = express(); 앱.사용('/google_signin', bodyParser.json()); 앱.post('/google_signin', 함수 (req, res) { // TODO: 로그인 요청 처리 }); // 3 앱.모두('*', 함수 (req, res) { var URL = 'http://0.0.0.0:4984' + req.URL; req.파이프(요청(URL)).파이프(res); }); // 4 var 서버 = 앱.듣기(8000, 함수 () { var 호스트 = 서버.주소().주소; var 포트 = 서버.주소().포트; 콘솔.로그('http://%s:%s'에서 앱 듣기, 호스트, 포트); }); |
달라지는 점은 다음과 같습니다:
- 이전에 설치한 Node.js 모듈이 필요합니다.
- Express의 새 인스턴스를 즉시 실행하고 bodyParser 미들웨어 전용 /google_signin 엔드포인트.
- 다른 모든 요청을 동기화 게이트웨이로 프록시합니다.
- 포트 8000에서 Node.js 웹 서버를 시작합니다.
다음을 사용하여 서버를 시작합니다. $ 노드 server.js
를 클릭하고 http://localhost:8000
를 클릭합니다. 동기화 게이트웨이 환영 메시지가 표시되어야 합니다:
Google 로그인에서 동기화 게이트웨이 세션까지
이제 역방향 프록시가 설정되었으므로 Google 로그인 요청을 처리하고 세션 자격 증명을 반환하는 코드를 추가할 수 있습니다:
이 다이어그램에서 몇 가지 일이 일어나고 있습니다:
- 블랙 는 Google 사용자 ID를 앱 서버로 전송합니다.
- 파란색 는 동기화 게이트웨이에 해당 사용자 ID를 가진 사용자가 존재하는지 확인합니다.
- 오렌지 사용자가 아직 존재하지 않는 경우 사용자를 생성합니다(일반적으로 사용자가 앱에서 Google에 처음 로그인할 때).
- 녹색 가 세션을 생성하면 응답에 푸시/풀 복제를 위해 클라이언트 iOS 앱에 전달할 수 있는 세션 자격 증명이 포함됩니다. 모든 카우치베이스 라이트 SDK에는 푸시/풀 복제에 사용할 세션 자격 증명을 지정하는 메서드가 있습니다.
에서 /google_signin 핸들러에 다음을 추가합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/** 로컬에서 실행 중인 동기화 게이트웨이 인스턴스의 URL */. var stringURL = 'http://0.0.0.0:4985/simple-login'; /** 동기화 게이트웨이에 존재하는 사용자 이름이 주어지면 새 세션을 생성합니다 */. var 세션 요청 = 함수 (이름, 콜백) { 반환 요청({ 메서드: 'POST', URL: stringURL + '/_session', json: true, body: { 이름: 이름 } }, 콜백); }; var json = req.body; var 이름 = json.인증 공급자 + '-' + json.user_id.toString(); 요청 /** 사용자가 이미 존재하는지 확인 */ .get(stringURL + '/_user/' + 이름) .on('응답', 함수 (사용자 존재 응답) { 만약 (사용자 존재 응답.statusCode === 404) { /** 사용자가 존재하지 않는 경우 Google 사용자 ID를 이름으로 사용하여 사용자를 생성합니다 */. 반환 요청 .put({ URL: stringURL + '/_user/' + 이름, json: true, body: { 이름: 이름, 비밀번호: 수학.무작위.toString(36).substr(2) } }) .on('응답', 함수 (createUserResponse) { 만약 (createUserResponse.statusCode === 201) { /** 사용자가 성공적으로 생성되었다면 세션을 생성합니다 */. 세션 요청(이름, 함수 (세션 에러, 세션 응답, body) { res.보내기(body); }); } }); } /** 사용자가 이미 존재하므로 새 세션을 생성하기만 하면 됩니다 */. 세션 요청(이름, 함수 (세션 에러, 세션 응답, body) { res.보내기(body); }); }); |
Node.js 애플리케이션을 다시 시작하고 다음 curl 요청을 실행하여 새 사용자를 등록합니다:
1 2 3 4 5 6 7 8 9 10 11 |
$ curl -vX POST -H '콘텐츠 유형: 애플리케이션/json' http://localhost:8000/google_signin -d '{"user_id": "123", "auth_provider": "google"}' // 응답 { "session_id":"8520c19159a4154abf5fb9b9003ff9677e035929", "만료":"2015-10-13T12:48:05.879325313+01:00", "쿠키_이름":"동기화 게이트웨이 세션" } |
다음 섹션에서는 앱 서버의 새로운 기능을 사용하기 위해 Swift 2를 사용하여 간단한 iOS 앱을 만들겠습니다.
스위프트 타임: iOS용 간편 로그인 화면
Xcode로 전환하고 다음을 사용하여 새 프로젝트를 생성합니다. 단일 보기 애플리케이션 템플릿을 사용합니다:
이 프로젝트에 종속성을 설치하기 위해 Cocoapods를 사용하겠습니다. Xcode 프로젝트를 닫고 명령줄에서 다음을 실행합니다. $ 포드 초기화
를 클릭해 프로젝트를 Cocoapods를 사용하도록 마이그레이션하세요. 프로젝트의 포드파일 를 클릭하고 문을 추가합니다:
1 2 |
pod '구글/로그인' pod 'couchbase-lite-ios' |
실행 $ 포드 설치
을 클릭하고 SimpleLogin.xc작업공간 파일을 생성합니다. 다음으로, Swift 코드에서 Objective-C를 사용하는 Google SignIn 및 CouchbaseLite SDK에 액세스하기 위한 브리징 헤더를 추가합니다. Xcode 프로젝트 탐색기에서 SimpleLogin을 마우스 오른쪽 버튼으로 클릭하고 새 파일.... 헤더 파일 템플릿을 선택하고 브릿징 헤더.h. 다음 가져오기 문을 추가합니다:
1 2 |
#import #import |
이제 Xcode에 이 파일을 사용하도록 지시해야 합니다. 에서 SimpleLogin 대상을 선택하고 빌드 설정 탭을 클릭하고 아래로 스크롤하여 Objective-C 브리징 헤더. 이 파일 경로를 추가합니다:
SimpleLogin/브리징헤더.h
Google 로그인 구성 파일
앱에서 로그인 SDK를 사용하려면 먼저 Google 개발자 콘솔에서 새 프로젝트를 생성하고 클라이언트 ID를 생성해야 합니다. 다행히도 다음 링크를 통해 이 작업을 자동으로 수행할 수 있습니다:
https://developers.google.com/mobile/add?platform=ios&cntapi=signin&cntapp=Simple%20Login&cntpkg=com.couchbase.SimpleLogin
위 페이지에서 서비스 선택 및 구성 버튼을 클릭하면 사용 설정할 수 있는 새 페이지로 이동합니다. Google 로그인. 거기에서 구성 파일 생성 를 클릭하고 새 plist 파일을 다운로드합니다.
가져오기 GoogleServer-Info.plist 를 Xcode 프로젝트에 추가합니다:
프로젝트에 URL 구성표 추가하기
Google 로그인을 사용하려면 프로젝트에 두 개의 사용자 지정 URL 스키마를 추가해야 합니다. 사용자 지정 스키마를 추가하려면 다음과 같이 하세요:
- 프로젝트 구성 열기: 왼쪽 트리 보기에서 프로젝트 이름을 두 번 클릭합니다. 왼쪽 트리 보기에서 앱을 선택합니다. 대상 섹션을 클릭한 다음 정보 탭을 클릭하고 URL 유형 섹션으로 이동합니다.
- 를 클릭합니다. + 버튼을 클릭하고 반전된 클라이언트 ID에 대한 URL 체계를 추가합니다. 이 값을 찾으려면
GoogleService-Info.plist
구성 파일을 열고역방향_클라이언트_ID
키를 클릭합니다. 해당 키의 값을 복사하여 해당 키를 URL 구성표 상자를 선택합니다. 다른 필드는 비워둡니다. - 를 클릭합니다. + 버튼을 클릭하고 두 번째 URL 체계를 추가합니다. 이 URL은 앱의 번들 ID와 동일합니다. 이 경우 다음과 같아야 합니다. com.couchbase.SimpleLogin.
완료되면 구성은 다음과 비슷하게 보일 것입니다(단, 애플리케이션별 값을 사용해야 합니다):
iOS 앱에 Google 로그인 통합
이제 프로젝트가 올바르게 구성되었으므로 SDK를 사용하여 UI에 로그인 버튼과 사용자 정보를 검색하는 앱 로직을 추가할 수 있습니다. In AppDelegate.swift를 사용하여 이 클래스가 GIDSignInDelegate
를 클릭하고 application:didFinishLaunchWithOptions:
메서드를 사용합니다:
1 2 3 4 5 6 7 8 9 10 11 |
func 애플리케이션(애플리케이션: U애플리케이션, didFinishLaunchWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // 로그인 초기화 var 구성 오류: NSError? GGLContext.공유 인스턴스().configureWithError(&구성 오류) assert(구성 오류 == nil, "Google 서비스 구성 중 오류: (configureError)") GIDSignIn.공유 인스턴스().델리게이트 = self 반환 true } |
그런 다음 application:openURL:
메서드를 호출합니다. 메서드는 앱 델리게이트의 handleURL
메서드의 GIDSignIn
인스턴스를 생성하여 인증 프로세스가 끝날 때 애플리케이션이 수신하는 URL을 올바르게 처리합니다:
1 2 3 4 5 6 |
func 애플리케이션(애플리케이션: U애플리케이션, openURL URL: NSURL, 소스 애플리케이션: 문자열?, 주석: AnyObject?) -> Bool { 반환 GIDSignIn.공유 인스턴스().handleURL(URL, 소스 애플리케이션: 소스 애플리케이션, 주석: 주석) } |
앱 델리게이트에서 GIDSignInDelegate
프로토콜을 사용하여 다음 방법을 정의하여 로그인 프로세스를 처리할 수 있습니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
func 로그인(로그인: GIDSignIn!, didSignInForUser 사용자: GIDGoogleUser!, withError 오류: NSError!) { 만약 (오류 == nil) { // 여기에서 로그인한 사용자에 대한 모든 작업을 수행합니다. let userId = 사용자.userID // 클라이언트 측 전용! let idToken = 사용자.인증.idToken // 서버로 전송해도 안전합니다. let 이름 = 사용자.프로필.이름 let 이메일 = 사용자.프로필.이메일 // ... } else { println("(error.localizedDescription)") } } |
로그인 버튼 추가하기
다음으로 사용자가 로그인 프로세스를 시작할 수 있도록 Google 로그인 버튼을 추가합니다. 앱의 로그인 화면을 관리하는 뷰 컨트롤러에서 클래스에서 GIDSignInUIDelegate
프로토콜을 사용합니다.
뷰 컨트롤러에서 viewDidLoad 메서드를 재정의하여 GIDSignIn 객체의 UI 델리게이트를 설정하고 (선택 사항으로) 가능한 경우 자동으로 로그인하도록 설정합니다.
1 2 3 4 5 6 7 8 9 10 11 |
오버라이드 func viewDidLoad() { super.viewDidLoad() GIDSignIn.공유 인스턴스().uiDelegate = self // 댓글을 취소하면 사용자가 자동으로 로그인됩니다. //GIDSignIn.sharedInstance().signInSilently() // TODO(개발자) 로그인 버튼 룩앤필 구성하기 // ... } |
구현 GIDSignInUIDelegate
프로토콜을 사용합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 이 메서드들은 GIDSignInUIDelegate가 // UIViewController. // 사용자가 시작했을 때 시작된 UIActivityIndicatorView 애니메이션을 중지합니다. // 로그인 버튼을 누릅니다. func signInWillDispatch(로그인: GIDSignIn!, 오류: NSError!) { 내 활동 표시기.중지애니메이션() } // 사용자에게 Google에 로그인하라는 메시지를 표시하는 보기를 표시합니다. func 로그인(로그인: GIDSignIn!, presentViewController 뷰 컨트롤러: UIViewController!) { self.presentViewController(뷰 컨트롤러, 애니메이션: true, 완료: nil) } // 'Google로 로그인' 보기를 해제합니다. func 로그인(로그인: GIDSignIn!, 뷰 컨트롤러 해제 뷰 컨트롤러: UIViewController!) { self.뷰 컨트롤러 애니메이션 해제(true, 완료: nil) } |
추가 GIDSignInButton
를 스토리보드, XIB 파일에 추가하거나 프로그래밍 방식으로 인스턴스화할 수 있습니다. 스토리보드 또는 XIB 파일에 버튼을 추가하려면 보기를 추가하고 해당 사용자 지정 클래스를 다음과 같이 설정합니다. GIDSignInButton
.
앱을 실행하면 이제 Google 스타일 버튼이 표시되고 로그인할 수 있습니다:
동기화 게이트웨이로 세션 만들기
In AppDelegate.swift에서 signIndidSignInForUserwithError
메소드를 호출하고 기존 코드 아래에 다음을 추가합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 1 let loginURL = NSURL(문자열: "http://localhost:8000/google_signin")! // 2 let 세션 = NSURLSession.공유 세션() let 요청 = NSMutableURLRequest(URL: loginURL) 요청.추가값("application/json", forHTTP헤더필드: "콘텐츠 유형") 요청.HTTPMethod = "POST" // 3 var 속성 = [ "user_id": userId, "auth_provider": "google" ] let 데이터 = 시도! NSJSONSerialization.dataWithJSONObject(속성, 옵션: NSJSON작성 옵션.예쁜 인쇄) // 4 let 업로드 작업 = 세션.업로드태스크위드요청(요청, fromData: 데이터, 완료 핸들러: { (데이터, 응답, 오류) -> Void in // 5 let json = 시도! NSJSONSerialization.JSONObjectWithData(데이터!, 옵션: NSJSON리딩옵션.허용 조각) as! 사전<문자열, AnyObject> 인쇄("(json)") // TODO: 인증된 사용자를 통한 풀/푸시 복제 }) 업로드 작업.이력서() |
위의 내용은 다음과 같습니다:
- 로컬로 실행되는 앱 서버의 로그인 URL입니다.
- 요청 인스턴스를 만듭니다.
- 요청에 전송할 Google 사용자 ID가 포함된 속성을 JSON으로 직렬화합니다.
- POST 요청을 보냅니다.
- 동기화 게이트웨이 세션 자격 증명이 포함된 응답 개체
참고: 애플리케이션을 실행하기 전에 앱 서버가 HTTPS를 사용하지 않으므로 앱 전송 보안을 비활성화해야 합니다. Open Info.plist 를 클릭하고 다음을 추가합니다:
1 2 3 4 |
NSApp교통 보안 NSAllowsArbitraryLoads |
빌드하고 실행합니다. Xcode 디버거에서 앱 서버의 응답을 확인합니다:
마지막으로 세션 세부 정보로 풀 복제를 시작하기 위해 Couchbase 코드를 추가합니다. In AppDelegate.m메서드를 추가합니다. 시작복제
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
func 시작복제(세션정보: 사전<문자열, 문자열>) { // 1 let 날짜 문자열 = 세션정보["만료"]! let dateFormatter = NSDateFormatter() dateFormatter.날짜 형식 = "yyyy-MM-dd'T'HH:mm:ss.SSSZ" let 날짜 = dateFormatter.dateFromString(날짜 문자열)! // 2 let 관리자 = CBLManager.공유 인스턴스(); let 데이터베이스 = 시도! 관리자.데이터베이스 이름("simple-login") // 3 let syncGatewayURL = NSURL(문자열: "http://localhost:8000/simple-login")! let pull = 데이터베이스.createPullReplication(syncGatewayURL) pull?.연속 = true // 4 pull?.설정된 쿠키 이름(세션정보["쿠키_이름"]!, withValue: 세션정보["session_id"]!, 경로: "/", 만료일: 날짜, 보안: false) pull?.시작() } |
이전 단계에서 추가한 uploadTask의 콜백에서 이 메서드를 호출합니다.
이제 끝났습니다! 이제 이름을 가진 사용자에 대한 풀 복제가 실행 중입니다. google-{userID}
. 다음 명령을 사용하여 문서를 추가하여 액세스가 작동하는지 테스트할 수 있습니다(Google 사용자 ID를 이미 로그인한 사용자의 ID로 바꾸기):
1 2 3 4 |
$ curl -vX POST -H '콘텐츠 유형: 애플리케이션/json' http://localhost:4985/simple-login/ -d '{"_id": "1234", "user_id": "google-102898171485172449137"}' |
관리자 UI의 사용자 탭으로 이동합니다. http://localhost:4985/_admin/db/simple-login/users 를 클릭하고 사용자 google-102898171485172449137
이제 채널에 액세스할 수 있습니다. 1234
:
앞으로 나아갈 방향
축하합니다! 카우치베이스 모바일에서 Google 로그인을 사용하여 로그인한 사용자의 사용자 ID에 따라 문서를 동기화하는 방법을 배웠습니다.
아래 댓글이나 포럼에서 여러분의 의견과 결과를 공유하거나 궁금한 점이 있으면 언제든지 질문해 주세요. 곧 연락드리겠습니다!