SwiftUI ) 왕초보를 위한 Github으로 로그인 하기

 

안녕하세요 :) Zedd입니다.

오늘은 그냥 기록용 글입니다.

이건 SwiftUI로 한건데, 뭐로 하든 핵심적인 부분은 똑같으니 그냥 보셔도 될 것 같아요.

Github으로 로그인 하기

1. OAuth App만들어주기

이렇게 들어가준다.

2. New OAuth App을 눌러준다.

3. Application 정보 채워주기

일단 Application 이름은 오른쪽 그림처럼 나오니 참고.

Q : Authorization callback URL은 뭐냐?

먼저, 로그인 과정을 상상해봅시다

내 앱에 어떤 버튼이 있고, 해당 버튼을 누르면

이 화면이 나오게 됩니다. 이 화면은 사파리로 열리는 웹뷰인데요.

그리고 앱 안에서 열리는게 아니라, 외부 사파리 앱으로 열리기 때문에

사파리가 열리면서 내 앱을 떠나게됩니다.

그래 일단 떠났긴 떠났는데...로그인을 하고 내 앱으로 다시 가야겠죠?

그럴 때 이 callback URL을 사용하면 됩니다. 그냥 딥링크에요.

프로젝트로 가주세요.

URL Types에 가서

왼쪽 하단의 + 버튼을 누르시고 값을 채워주세요. 중요한 부분은 URL Schemes 부분입니다.

누가 이 scheme을 호출하면 해당 scheme을 가진 앱이 열리게 됩니다.

그 값을 Authorization callback URL에 넣어주면

로그인이 끝나고, github이 이 callBack URL을 호출해줍니다. 즉 저희 앱이 열리게 됩니다.

필수값은 다 채웠으니 Reigster해주시면 됩니다.

이제 필요한 작업은 다했습니다. 문서보고 따라하기만 하면 됩니다.

문서에서는 이런 flow로 하라고 나와있는데요.

1. Users are redirected to request their GitHub identity

2. Users are redirected back to your site by GitHub

3. Your app accesses the API with the user's access token

시작

Request a user's GitHub identity

이 url로 요청을 보내면 되는데요. 파라미터를 함께 보내야합니다.

파라미터는 여기에서 보실 수 있습니다.

반드시 보내야하는 파라미터는 client_id입니다.

client_id는

여기서 얻으실 수 있습니다.

"https://github.com/login/oauth/authorize?client_id=\(clientID)"

이런식으로 만들어주시면 됩니다.

그 외로 redirect_uri, login, scope, state, allow_signup이 있습니다.

알아서 정의 잘 보시고 필요한거 넣으시면 됩니다.

참고로 저는 scope를 넣어줬는데요. 사용가능한 scope는 여기서 보실 수 있습니다.

넣어주지않으면 기본값은 빈 배열입니다.

해당 스코프에서 필요한 값들을 "repo gist user"이런식으로 넘겨주시면 됩니다.

URLComponents를 공부했으니..이걸 사용해서 URL을 만들어주겠습니다.

let clientID = "a1b2c3d4"
let scope = "repo gist user"
let urlString = "https://github.com/login/oauth/authorize"
var components = URLComponents(string: urlString)!
components.queryItems = [
    URLQueryItem(name: "client_id", value: self.clientID),
    URLQueryItem(name: "scope", value: self.scope),
]
print(components.url!) // 

아무튼 이렇게 URL을 만들어주겠습니다.

그리고 해당 URL을 열어주면 됩니다.

SwiftUI앱이 아니시라면 아래처럼,

guard let url = URL(string: urlString) else { return }

UIApplication.shared.open(url)

SwiftUI앱에서 열어주고 싶으시면 아래처럼 해주시면 됩니다.

var body: some View {
      Link("Login with Github",
           destination: self.viewModel.loginURL)
}

자..이제 해보면

이렇게 외부 사파리를 통해 로그인 화면이 열리게 되니다!

로그인을 성공하면 가장 오른쪽 사진처럼 Github이 딥링크를 통해 우리의 앱을 열려고 시도합니다.

Open을 눌러서 내 앱이 잘열리는지 확인애야합니다.

 

Users are redirected back to your site by GitHub

자..사용자가 제 앱을 다시 열면, Github은 저희에게 "임시코드"를 줍니다.

이 코드를 가지고 acess token을 얻어야 합니다.

이 코드는 어디서 받냐?

AppDelegate

SceneDelegate

AppDelegate, SceneDelegate가 없는 SwiftUI App은

onOpenURL을 사용하면 됩니다.

아무튼 URL을 찍어보면

URLScheme://?code=a1b2c3d4e5~~

이런식으로 나오게 됩니다.

임시코드는 10분후에 만료라고 하니 주의하세요.

저 url에서 code부분을 얻어야 합니다.

Link("Login with Github",
     destination: self.viewModel.loginURL)
     // url = URLScheme://?code=a1b2c3d4e5~~
    .onOpenURL(perform: { url in
        let code = url.absoluteString.components(separatedBy: "code=").last ?? ""
        // code = a1b2c3d4e5~~
}

저는 이런식으로 해줬어요.

code를 성공적으로 얻으셨으면 이제, 위 URL을 통해 access token을 얻으면 됩니다.

위 api의 파라미터는

이렇게 있습니다. required는 꼭 보내야겠죠? 

client_Id와 client_secret은

아까 여기에 있습니다. code는 우리가 방금 github으로부터 얻은 code구요.

각자 편하신 방법으로 api호출을 해주세요. POST메소드인 것에 유의하세요.

응답은 만약 json으로 받도록 했다면

{

"access_token":"어쩌구 저쩌구",

"scope":"repo,gist",

"token_type":"bearer"

}

이런식으로 올 것입니다.

 

Your app accesses the API with the user's access token

이제 이 access_token으로 api호출을 하면 됩니다.

아마 내가 처음에 준 scope내에서 호출 할 수 있는 api는 전부 호출할 수 있을거에요.

호출하는 방법은 위에서 받은 acessToken을 api request header에 넣으면 됩니다.

Authorization: token OAUTH-TOKEN 

이렇게요. 코드로 더 자세히 보자면,

var request = URLRequest(url: url)

request.addValue("token \(token)", forHTTPHeaderField: "Authorization")

이렇게 해주면 됩니다.