Github Login #01

웹사이트에 소셜 로그인을 구현하는 방법을 알아본다.

https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps

깃헙 로그인을 사용해보려고 한다. 깃헙 로그인은 꽤 특이한 편이다.

사이트를 보면 몇몇 parameter들이 있는게 특이한데 한번 살펴 본다.

하지만 다른 SNS랑 흐름은 비슷하다. 다른 것들도 OAuth를 사용한다.

client_id라는 단어를 쓰지 않고 app_id라는 단어를 쓰겠지만

흐름은 비슷하다. 그래서 이걸 배우고 나면 카카오나 인스타그램 뭐든지 다 할수 있을거다.

물론 구글 같은 곳은 더 많은 걸 요청 하게 될거다.

왜냐하면 구글은 더 많은 정ㅂ조를 가지고 있고, 많은 정보를 받아 올수 있기 때문이다.

더 많은 설정 과정이 필요하다. 하지만 승인되는 순간은 똑같다.

말하고자 하는건 흐름이다. 그리고 그 흐름은 다음과 같다. 만약 깃헙으로 로그인하고 싶다면

해야하는건 사용자를 깃헙으로 보내는거다. 사용자는 깃헙으로 이메일이랑 패스워드 등을 넣게 된다.

그리고 정보를 공유하는 것을 승인하게 될거다. 그러면 깃헙은 사용자를 웹사이트로 돌려보낼거다.

그 단계가 되면 깃헙은 사용자를 token과 함께 redirect시킬거다.

그러면 그 token으로 사용자의 정보를 받아오는 거다.

그 token은 매우 빠르게 만료 될거다. 이게 바로 로그인 과정이다.

사용자를 깃헙으로 보낼거고, 로그인하게 될거다. 그러면 깃헙이 비밀번호, 보안 이메일 인증 모든걸 처리해준다.

그리고 승인되는 순간 token과 함께 웹사이트로 돌아게되고, 사용자의 정보에 접근할수 있게 된다.

더 나아가기전에 먼저 Github Application이 있어야한다.

https://github.com/settings/developers

여기로 가서 Developer settings를 눌러준다. 그리고 OAuth Apps를 눌러준다.

Register a new application 버튼을 눌러 준다.

Application name 에Wetube을 넣어주고

URL은 http://localhost:4000/ 을 넣어 준다.

Application description은 Wetube Reloaded을 넣어주고

Authorization callback URL에는 뭔가 좀 이상한걸 넣어줄거다.

http://localhost:4000/users/github/callback

마법 같은걸 볼거지만 나중에 이해하게 될거다. 아무거나 넣어도 상관 없다.

현재는 이 url로 넣기로 한다. 코드에서 나중에 사용해야 하니까 기억 할수는 있어야 한다.

그러고 나서 이제 Register application을 누른다.

Wetube라는 앱을 만들었고 사용자는 0명이고 Client ID가 있고

나중에 쓸 client secret이라는게 있고 로고를 업로드 해주고 update해준다.

이제 순서에 대해서 알아보도록 한다.

https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps

1.Users are redirected to request their GitHub identity
1. 단계 사용자들은 깃헙 신원을 요청하기 위해 redirect된다.

1단계로는 사용자를 깃헙으로 redirect시켜야 한다.

방문하려는 웹사이트는 바로이거다.

GET https://github.com/login/oauth/authorize

그래서 login.pug으로 가서 br을 입력하고 웹사이트를 넣어줄거다.

block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize") Continue with GitHub →

그리고 Continue with Github라고 써줬다.

이제 로그인페이지로 가본다. Continue with GitHub 클릭 해준다.

Not Found가 나온다. 왜 이럴까? 왜냐하면 parameter들을 보내줘야한다.

그 중 하나는 Client ID이다. 그러면 URL에 Client ID를 보내준다.

block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4") Continue with GitHub →

client-id라 입력하고 깃헙이 준 Client ID를 추구해 준다.

그리고 새로고침 해준 다음에 Continue with GitHub를 클릭해준다.

아까와는 다른 화면이 보인다. Authorize Wetube라고 나온다.

그리고 Wetube가 나의 계정에 접근하고 싶다고 나온다.

무슨 데이터를 보고 싶어하냐면 public데이터를 보고 싶다고 한다.

예를 들어 ID아니면 프로필 사진 등등 하지만 이것만 원하지는 않는다.

사실 사용자의 이메일을 원한다. 그 말은 더 많은 정보를 요청해야 한다는 뜻이다.

물론 여기에 긱헙에서 만든게 아니라고 나와있고 만든지 하루도 안되었다고 나와있다.

그리고 10명 이하의 사용자 밖에 없다고 한다.

여기 보다시피 승인하면 localhost:4000으로 redirect될거라고 한다.

아직 redirect 하지 않을거다. 그래서 창을 닫는다.

이게 1단계이다. 1단계는 바로 사용자를 깃헙으로 보낸다. 그러면 깃헙에서는

이미 로그인이 되어있기에 Authorize가 뜬다.

2단계는 이걸 클릭해서 Authorize를 하는건데 아직은 클릭 하지 않는다.

클릭하면 웹사이트로 돌아가게 된다. 문제는 public데이터보다 더 많은 정보를 받고 싶다는 거다.

그래서 scope에 뭔가 전송할거다.

block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&scope=") Continue with GitHub →

&scope 그리고 공백으로 구분된 scope를 보낸는 거다.

scope에는 사용자에 대해 어디까지 알수 있는지 적으면 된다.

예시를 보면 allow_signup이라는게 있다.

이건 사용자가 깃헙 계정이 없다면 계정 생성 할수 있게 하겠냐 아니면 이미 계정이 있는 사람만 하게 할거냐 라는 거다.

예를 들어 시크릿 모드를 열어서 클릭하고 보다시피 깃헙에 로그인해서 Wetube로 계속 하라고 한다.

그래서 로그인하거나 계정을 만들수가 있다.

그런데 authorize_signup을 false로 하면 어떻게 되는지 보기로 한다.

block content 
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Password",name="password", type="password", requeired)
        input(type="submit", value="Login")
        br
        a(href="https://github.com/login/oauth/authorize?client_id=2c44ee26963db98266d4&allow_signup=false") Continue with GitHub →

&allow_signup=false 입력해주고 시크릿 모드에서 새로고침을 해주면

보다시피 계정 생성이 불가능하다. 이미 깃헙 사용자인 경우에만 가능하다.

이게 1단계이다. 사용자를 깃헙으로 보낼수 있고 URL에 있는 것들을 바꿈으로써

다양한 방법으로 사용자를 승인 할수가 있다. 사용자가 정보를 어디까지 공유해야 하는지와

계정 생성을 할 수 있게 할지 말지 설정할수 있다.