OAuth 로그인의 핵심은, 이 로그인 기능을 이용하는 사이트에서는 로그인 단계에서는 관여를 하지 않고, 유저와 sns 사이트에서 로그인처리를 하고, 결과값을 이용 사이트에 되돌려 줍니다.
그 과정에서 리디렉션 기능이 사용 되는데, 로그인할 주소를 유저에게 리디렉션해서 주면, sns 로그인 화면이 표시되고, 로그인을 무사히 완료 되면, 다시 리디렉션을 이용해, 사이트로 접속해 Get 타입으로 결과 코드를 돌려 줍니다. 마지막 결과 코드를 돌려 받을 url 주소는 트위터 서버에 등록할 필요가 있습니다. ip 주소는 안되며, 도메인으로 시작해야 하는데, 테스트를 위한 localhost도 허용을 합니다.
저는 로컬 서버에서 Apache 웹사이트를 등록해 사용하고 있습니다. 주소는 다음과 같이 정해 두었습니다.
로그인 요청 주소 : http://localhost/p999/twitter_OAuth/req_code.php . 토큰 교환 주소 : http://localhost/p999/twitter_OAuth/exchange_token.php .
2. 개발자 적용하기.
개발자 페이지에 접속 하면 다음과 같은 페이지를 만날 것 입니다. 아직 개발자 계정으로 전환이 되어 있지않다면, 오른쪽 상단에 Apply 레이블이 표시 될 것 입니다. 이 것이 표시 되지 않으면, 이미 개발자 계정으로 전환된 상태 이므로, 다음 항목으로 넘어 가면 되며, 아니라면, 저와 같이 개발자 적용을 하면 됩니다. Apply 버튼을 눌러 주도록 합니다.
그러면, 개발자 계정을 적용하는 화면이 나옵니다. 여기서 [ Apply for a developer account ] 눌러 개발자 계정 전환 신청단계로 들어 갑시다.
개발자 계정을 적용하면 바로 개발자 계정을 살 수 있을 지 모르겠지만, 저 같은 경우 유효한 전화번호를 입력하지 않아, 적용이 되지 않은 상태였습니다. 일단 전화번호를 등록하는 버튼을 눌러 전화번호를 등록하겠습니다.
다음 화면이 나오면 전화번호를 등록해 주도록 합니다.
그럼 아래와 같이 전화 번호 인증이 되고, 버튼 Continue 상태가 됩니다. Continue 버튼을 눌러 줍니다.
그 다음 질문은 개인의 개발자 계정인지, 조직의 개발자 계정인지 묻습니다. 상황에 따라 선택하면 되는 데 개인을 선택할 경우, 단 2개만 묻습니다. 이름과 사는 국가. 하지만, 계정 문자 @계정명 을 지정할 수 없이 이상한 값을 받습니다. 그러므로, 조직을 선택하도록 합니다.
아래와 같은 요령으로, 작성한 뒤 [Continue] 버튼을 눌러 주도록 합니다.
다음 페이지는 트위터 API를 이용해 어떤 프로젝트를 진행하려는 지 알려 달라고 합니다. 폼을 보시면 아시겠지만, 최소 300자 이상의 프로젝트 설명난이 있습니다. 한글도 재대로 못 쓰는 제가 영어로 300자 문장을 만들기란 여간 힘들지 않았습니다. 그래도 써야 한다니 써 드렸습니다. 구글 번역기와 함께. (영포자가 쓰기에는 매우 높은 벽이 였습니다.).
그 다음 서비스 약관을 허용하는지 묻는 것 입니다. Accept를 선택하고 스크롤을 쭉 내린 뒤 체크 박스가 활성화 돠면, 첫 항목만 체크 한뒤, [ Submit application ] 버튼을 눌러 주시면 됩니다.
마지막 작업으로 Email 인증 처리를 하는 작업을 합니다.
그럼 아래와 같은 메일이 왔을 것 입니다. (오지 않았다면, 스팸으로 분류 되었는지 확인해 주세요.). [ Confirm your email ] 버튼을 눌러 이메일을 인증하도록 합니다.
3. 앱 만들기.
개발자 계정으로 전환을 완료했다면, 트위터를 API를 사용하려는 홈페이지, 모바일 앱, 등을 관리하는 일종의 프로젝트 개념의 앱을 만들어야 하며, 그곳에 우리가 무엇인가를 하기 위한 셋팅을 해야 합니다. 말로 설명하는 것 보다 일단 앱을 만들고 시작해 보도록 합시다.
처음 개발자 사이트에 접속하고 로그인 하면 다음과 같은 화면을 만날 수 있습니다. 여기서 Apps를 선택해 주도록 합니다.
그리고, 나온 화면에서, [ Create an app ] 버튼을 눌러 주도록 합니다.
여기 서 애플 개발자 계정을 적용하지 않았다면, 다음과 같은 창을 만날 수 있습니다.
우리는 이미 개발자 적용이 되어 있으므로, 뜨지 않을 것 입니다. 만약 뜬다면, 개발자 계정으로 전환이 완벽하게 이뤄 지지 않은 경우 이므로, 문서의 처음으로 돌아가 천천히 따라해 주시기 바랍니다. 정상적이라면 아래와 같은 폼이 뜨고, 값을 입력하고, Create 버튼을 눌러 주면됩니다.
대개의 값은 신경 쓸 필요 없지만, Enable Sign in with Twitter를 체크해, 나오는 Callback URL 은 유저가 트위터 로그인 후 결과를 돌려 받을 페이지를 입력해야 합니다. 우리는 문서 처음에 http://localhost/p999/twitter_OAuth/exchange_token.php 페이지를 결과를 받을 주소로 정했습니다. (여러 분은 다르게 정해도 상관은 없지만, 이 것으로 로그인 결과를 콜백 받는다는 사실은 알고 계셔야 합니다.).
저는 아래와 같이 작성했습니다. (트위터는 사용 목적등을 서술하는 것을 많이 요구해, 영포자인 저를 매우 힘들게 하는 군요.).
누르면, 붉은 색 3가지 항목이 나오는데, 전 뭔가 잘 못 입력했나하고, 살펴 보니, 우리가 앞서 승인했던 약관 내용을 상기 시키며, 3가지 목적으로 사용하면 안됨을 경고 하고 있었습니다. Create 버튼을 눌러 줍니다.
그럼 아래와 같이 앱이 생성된 정보가 표시됩니다.
여기서 Keys and tokens 텝을 눌러 api키와 Access token & access token secret 항목 아래, [Create] 버튼을 눌러 주도록 합니다.
구글 로그인 기능은 자신의 구글 자원에 접근(구글 드라이브, 메일 등) 하기 위해 처음 로그인 하는 부분만 활용해 로그인 연동 처리를 하는 것 입니다. 그래서 최소 하나의 API를 사용하겠다 라고, 신청을 해야 그 다음 부터 이용이 가능합니다. 우리는 Gmail을 신청할 것 입니다. 구글 사용자라면 누구나, Gmail을 이용하고, 모든 유저가 활성화 되어 있기 때문입니다.
1) 프로젝트 생성.
목적별로 프로젝트를 생성한 후, 그 프로젝트에 Gmail을 생성합니다. 우리는 php google oauth 라는 프로젝트를 만들어 보도록 합시다. 처음 구글에 접속하면 다음과 같은 페이지가 표시될 것 입니다. 여기서 만들기를 눌러 프로젝트 만들기 창으로 접근합니다.
모든 사항을 입력한 후 만들기 버튼을 눌러 줍니다. (프로젝트 아이디를 변경해도 상관없습니다. 하지만 여기서는 하지 않았습니다.).
2) Gmail 라이브러리 추가.
그럼 php google oauth 프로젝트가 자동으로 선택되고 (하나 뿐 이므로), API 라이브러리를 추가하라는 메시지를 만납니다. 여기서 우리가 필요로 하는 Gmail API를 추가 해 보도록 합시다.
그럼. API 라이브러리를 관리하는 화면이 나오는데, 왼쪽 메뉴의 이메일을 선택해 줍니다.
Gmail API를 선택합니다. (이메일은 Gmail API 하나만 있지만, 다른 카테고리는 여러개의, API가 표시될 수 있습니다.)
Gmail API 상세화면에서 사용설정 버튼을 눌러 사용할 수 있도록 해 줍니다.
2. OAuth 2.0 동의 화면 설정.
OAuth 로그인을 하는 과정에서 어떤 권한을 사용하는지등을 나타내는 화면이 표시 됩니다. 이 화면을 표시하기 위한 동의 화면을 구성하도록 하겠습니다.
아래와 같이 OAuth 동의 화면 탭을 선택해 나온 페이지에 애플리케이션 이름을 입력하고, 하단의 저장 버튼을 눌러 줍니다.
3. OAuth 2.0을 위한 클라이언트 ID 만들기.
구글 클라우드 API를 사용하기 위해서는 반드시 OAuth 2.0 방식을 통한 로그인 후 토큰을 획득해야 합니다. 이 과정에서 프로젝트를 구분하는 클라이언트 ID가 필요한데, 지금 만들어 보도록 하겠습니다.
아래와 같이 사용자 인증 정보 탭을 선택하고, OAuth 클라이언트 ID 생성을 눌러 줍니다.
클라이언트 성성 화면에서, 웹 애플리케이션을 선택하고, 이름은 적당히 입력해 주고, 생성 버튼을 눌러 줍니다.
그리고 나면 OAuth 클라이언트 정보를 확인시켜 주는 창이 뜰 텐데 일단 확인을 누르고 닫아 줍니다.
4. 리디렉션 주소 설정.
OAuth 2.0에서는 필연적으로 사용자가 계정의 아이디 및 패스워드를 입력하게 됩니다. 이런 과정을 통해 서버 운영자인 우리는, 사용자의 계정이나 패스워드를 저장할 필요성이 사라집니다. 사용자가 로그인을 무사히 완료하면, 서버쪽으로 성공 결과 및 인증코드를 돌려 주는 데, 그 주소를 리디렉션 주소라고 합니다. 이 값은 중요하므로, 구글에 등록된 주소로만 리디렉션 해 줍니다.
이 과정에서 도메인이 필요한 데, 우리는 테스트 과정이므로, localhost를 사용할 것 입니다. 실제 서비스를 한다면, 도메인을 이용해 구성해 주세요.
저는 웹페이지 중 http://localhost/p999/google_OAuth2/token_exchange.php 라는 주소를 설정할 것 입니다. 파일이름이 token_exchange.php 인 이유는 받은 인증 코드를 이용해 토큰으로 교환할 것 이기 때문입니다.
사용자 인증탭에 OAuth 2.0에 사용할 클라이언트 ID의 수정 버튼을 눌러 줍니다. 그리고, 나온 페이지에 승인된 리디렉션 URI에 리디렉션 주소를 입력하고( 꼭 엔터를 눌러 줍니다. ), 저장 버튼을 눌러 줍니다.
5. 인증을 구현을 위한 필요 정보 조사.
인증에 사용할 클라이언트 ID를 눌러 주도록 합니다.
페이지에서 각각의 정보를 수집합니다.
클라이언트 ID : 107557211118-lpfm0l4gs5ffpas8cbjn5bp71f2hbag5.apps.googleusercontent.com 크라이언트 보안 비밀 : NaJSvmGdShGg1kkXkGdvHp4T 승인된 리디렉션 URI : http://localhost/p999/google_OAuth2/token_exchange.php
6. 인증서 코드 요청 페이지 만들기.
저는 PC의 웹서버에, /p999/google_OAuth2/ 폴더 속에서 웹 파일들을 만들어 주고 있습니다. 코드를 요청하는 페이지 이름은 request_code.php 로 정하고 코딩하였습니다. 이 페이지에서 사용되는 내용은, Using OAuth 2.0 for Web Server Application (위에 링크 있습니다.)공식 문서에 HTTP/REST 부분의, 내용 입니다.
scope 의 권한 부분은 OAuth 2.0 API Scopes ( 링크 )에서 확인할 수 있는 데, 우리는 메일의 모든 권한을 요청할 것 입니다. 그 권한은 ( https://mail.google.com/ ) 입니다.
state 값은 리디렉션 시 그대로 다시 전달 받을 값 입니다. 로그인 과정에서 수많은 유저가 동시에 접속하면, 어떤 유저의 로그인인지 확인할 필요가 있습니다. 이때 사용하면 좋으며, 세션을 사용한다면, 사용하지 않아도 상관이 없습니다.
코드 자체는 로그인할 주소를 입력한 뒤, 리디렉션 해 주면 끝이 납니다. 아래는, request_code.php 페이지의 내용 입니다.
인증 코드를 무사히 넘겨 받았을 때 결과를 리디렉션 받아 토큰을 교환하는 페이지의 소스는 일단 아래와 같이 둡니다.
<?php
print_r( $_GET );
자그럼 request_code.php 파일을 실행해 보도록 합시다. 정상적으로 리디렉션 된다면, 아래와 같은 페이지를 만날 수 있습니다.
일반적으로 구글 로그인 화면이므로, 쉽게 무엇을 넣어야 할 지 알 수 있을 것 입니다. 계속해서 로그인을 하도록 합니다.
로그인이 완료되면, 우리가 scope로 요청했던, Gmail의 모든 권한을 부여해달라는 페이지가 뜹니다. 우리는 현재 우리 계정으로 로그인하지만, 일반 유저가 우리 홈페이지에 접근할 때, 이 페이지를 보개 될 것이며, 자신의 Gmail을 이용할 것을 알게 됩니다. 일단 계속 해서 허용을 해 봅시다.
자 그럼 우리가 설정해 놓은 리디렉션 페이지로 GET을 통해 code, scope, state 값이 넘어 온 것을 확인할 수 있습니다.
7. 토큰 교환
우리가 리디렉션 받은 페이지에서, 받은 코드값을 사용해 토큰을 받아 오도록 하겠습니다. 이 부분은 서버에서 POST 통신을 해야 하므로, 약간의 난이도(?)가 있습니다.
POST 통신을 위해, fsocketopen 메소드를 상용하겠습니다. 공식 문서에 보면, 아래와 같이 데이터를 보내 도록 되어 있습니다. 우리도 그 값 그대로 보내면 되겠습니다. 공식 문서에는 endpoint가 https://www.googleapis.com/oauth2/v4/token 라고 되어 있습니다. 여기로 접속할 것 입니다.
신규앱을 등록하는 폼이 나타나면 아래와 같이 입력해 줍니다. 이름은 앱스토어 내에서 고유해야 합니다. 이미 사용중인 경우, 오류가 납니다. SKU는 앱의 상점을 위한 아이디인데, 적당히 고유한 값을 주면됩니다. 다 입력했으면 생성 버튼을 눌러 주도록 합니다.
앱 이 생성되고, 앱이 표시 되면, 메뉴의 [앱 내 추가 기능]을 선택해 주도록 합니다.
그럼 앱내 구입 항목을 선택할 수 있는데 여기서 + 버튼 눌러 소모성 상품을 추가하도록 합니다.
앱 내 생성하려는 구입 선택항 목에서, 소모품을 선택하고 생성 버튼을 눌러 주도록 합니다.
그 다음 상품을 넣는 창에서 각각 적당한 값을 넣으면 되지만, 제품 ID는 각 상품마다 고유한 값을 잘 넣어 줘야 합니다.
그럼 등록되었지만, [메타 데이터 누락됨] 이라고 나올 수 있는데, 이 것은 우리가 심사를 위한 데이터를 넣지 않아 생기는 일이고, 테스트를 위한 것은 여기까지 입력하면됩니다.
저는 아래와 같이 3개의 소모성 아이템을 구매 했습니다.
앱은 현재 메타 데이터가 누락되어 있는데, 메타데이터를 설정된 뒤, 다음과 같이 앱내 구입으로 선택되어야 합니다.
3. 결제 옵저버.
swift에서 옵저버는 멤버 프로퍼티의 값이 변할 때, 알려주는 일종의 콜백 입니다. 결제가 시작될 때, 거절 될때등, 결제 상태를 확인해 이를 처리할 옵저버가 필요합니다.
옵저버는 SKPaymentTransactionObserver 프로토콜(c#의 인터페이스)을 상속해 구현해야 합니다. 코드는 대략 아래와 같습니다.
class StoreObserver: NSObject, SKPaymentTransactionObserver {
// 멤버 변수들.
var purchased = [SKPaymentTransaction]();
override init() {
super.init()
// 생성자를 위한 초기화 메소드.
}
func paymentQueue(_ queue: SKPaymentQueue, updatedTransactions transactions: [SKPaymentTransaction]) {
for transaction in transactions
{
switch transaction.transactionState
{
// 결제가 진행 중인 경우.
case .purchasing :
print("결제가 진행되고 있습니다.");
break;
// 결제 창을 띄우는 데 실패했습니다.
case .deferred:
print("아이폰의 잠기는 등의 이유로 결제 창을 띄우지 못했습니다.");
SKPaymentQueue.default().finishTransaction( transaction );
break;
// 결제를 성공한 경우.
case .purchased:
print("결제를 성공하였습니다.");
handlePurchased( transaction );
SKPaymentQueue.default().finishTransaction( transaction );
break;
// 결제를 실패한 경우.
case .failed:
print("결제를 실패하였습니다.");
SKPaymentQueue.default().finishTransaction( transaction );
break;
// 결제 검증을 하였습니다.
case .restored:
print("상품 검증을 하였습니다.");
SKPaymentQueue.default().finishTransaction( transaction );
break;
default :
print("알수 없는 오류를 만났습니다.")
SKPaymentQueue.default().finishTransaction( transaction );
break;
}
}
}
func handlePurchased( _ transaction : SKPaymentTransaction ) {
purchased.append(transaction)
SKPaymentQueue.default().restoreCompletedTransactions();
print( "영수증 주소 : \(Bundle.main.appStoreReceiptURL)" );
let receiptData = NSData( contentsOf: Bundle.main.appStoreReceiptURL! );
print(receiptData)
let receiptString = receiptData!.base64EncodedString(options: NSData.Base64EncodingOptions());
print ( "구매 성공 트랜젝션 아이디 : \(transaction.transactionIdentifier!)" );
print ( "상품 아이디 : \(transaction.payment.productIdentifier)" );
print ( "구매 영수증 : \(receiptString)" );
// 결제를 마무리 하도록 합니다.
SKPaymentQueue.default().finishTransaction( transaction );
}
}
대게의 코드는 공식 문서를 통해 쉽게 알 수 있지만 중요한 부분은 영수증을 받는 부분 입니다. 이 부분은 크게 언급이 공식 문서에 없어, 애를 먹었는데, Bundle.main.appStoreReceiptURL 값에 영수증 파일명이 들어 있습니다. 이것을 NSData를 이용해 값을 가지고 오고, Base64 인코딩을 해 사용하면됩니다.
결제를 할 때마다 transaction 이 생성되는 데, 실패하던, 걸절하던, 꼭 finishTransaction 처리를 해 줘야 합니다. 그렇지 않으면, 껐다 키면 다시 트랜젝션값들이 계속 추가 됩니다. 이 것은 앱이 비정상적으로 종료되었을 때도, 처리를 하기 위함으로 보입니다.
4. 상품 리스트 가지고 오기 및 구매 처리.
결제는 대체로 뷰에서 일어 나므로, viewController에서 처리하는 것이 좋습니다.
처음 상품 리스트를 가지고 오는 부분이 있습니다. 이때, 위에서 등록한 상품의 ID들을 적어 주면됩니다. 코드는 아래와 같습니다.
import UIKit
import StoreKit
class ViewController: UIViewController, SKProductsRequestDelegate {
// 멤버 변수들.
let iapObserver = StoreObserver()
var productRequest : SKProductsRequest?
// 입력 받은 상풉 정보들을 저장하는 변수들.
var validProductArray = [SKProduct]();
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// 페이먼트 관련 설정을 해 주도록 합니다.
SKPaymentQueue.default().add(iapObserver)
// 상품 정보를 가지고 오는 리퀘스트를 설정하도록 합니다.
let pIDs = Set(["gold500","gold100"]);
productRequest = SKProductsRequest( productIdentifiers: pIDs );
productRequest!.delegate = self;
// 앱스토어 상품 정보를 요청합니다.
productRequest!.start();
}
// 구매 진행 가능 여부를 확인합니다.
@IBAction func checkPaymentAble(_ sender: Any) {
if( SKPaymentQueue.canMakePayments() )
{
print("결제 요청이 가능합니다.");
}else
{
print("결제 요청이 불가능합니다.");
}
}
@IBAction func tryPaymentQueue(_ sender: Any) {
print( "골드 100개 결제 할거에요." )
let payment = SKMutablePayment( product: validProductArray[0] );
SKPaymentQueue.default().add(payment)
print( "변화가 있나요?" )
}
// 상품 정보를 받은 후 처리 메소드 입니다.
func productsRequest(_ request: SKProductsRequest, didReceive response: SKProductsResponse) {
print("상품갯수 \(response.products.count)")
print("확인하지 못한 상품 갯수 \(response.invalidProductIdentifiers.count)")
for product in response.products
{
print("이름:\(product.localizedTitle)\n가격:\(product.price)")
validProductArray.append(product)
}
}
}
이 것만으로 결제는 코드는 끝 입니다. 실제 결제를 해 볼때는 아이폰에서, 애플 아이디를 로그아웃하는 것이 좋습니다.
5. 검증 서버. (php)
원래 node js만 구현하려고 했으나, 잘 되지 않아 php로 먼저 결제 서버를 구현하였고, 그것을 바탕으로 node.js를 구현하였습니다.
