やりたいこと

バックエンドとフロントエンドを分離して、API経由でソーシャルログインを実現したいのでごちゃごちゃやっていて、色々見えてきたので、自分のメモとして書き置きしておきます。

使用したモジュール

dj-rest-auth

基本的には、公式ドキュメントの通りにやっておけば問題ないかと思います。

setting.pyの詳細な設定はここでは省略してます。

Googleの認証方法2つのやり方？

2023年12月調べたところ、Googleの認証方法には2通りあり

Authorization Code Grant
Implicit Grant
があるらしく、これによってViewの書き方が一行変わります。

GPTによると

OAuth 2.0の認証フローについては、一般的にAuthorization Code Grantが推奨されています。
Implicit Grantフローは、以前はブラウザベースのアプリケーションで使用されていましたが、セキュリティ上の理由から現在は推奨されていません。特に、Implicit Grantフローではアクセストークンがブラウザを通じて直接クライアントに送信されるため、トークンが漏洩するリスクがあります。
一方、Authorization Code Grantフローでは、認証コードがクライアントに送信され、その後サーバーサイドでアクセストークンと交換されます。これにより、アクセストークンが公開されるリスクが軽減されます。

とのことなので、Authorization Code Grantを採用していきたいと思います。

実装方針

認証フローを何も知らないと、やってて訳わからなくなると思うので、一旦以下の神記事を読むことをお勧めします。

神記事の通りに実装する方法を書いていきます。
具体的なコードは下にまとめとくので、適時実装してください。

1. ユーザーにリンクを踏ませる

(https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be より拝借)

まずは、ユーザーにリンクを踏ませる必要があるので、以下のリンクにアクセスしてもらいます。

https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=&prompt=consent&response_type=code&client_id=&scope=openid%20email%20profile&access_type=offline

ただし、ここで、

CALLBACK_URL_YOU_SET_ON_GOOGLE
YOUR CLIENT ID
が必要となるので、GCPにアクセスして、クライアントIDを入手して、コールバックURLを設定してください。ここら辺は、いっぱい記事があるので省略します。

コールバックURLっては、googleでログインした後に飛ばされるページのことです。

飛ばされるページは以下のViewを設定して、そこに飛ばせば良いです。

View

from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from allauth.socialaccount.providers.oauth2.client import OAuth2Client
from dj_rest_auth.registration.views import SocialLoginView


class GoogleLoginView(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    client_class = OAuth2Client
    callback_url = "http://127.0.0.1:8000/api/social/login/google/"

ちなみに、
callback_url =　''は、Authorization Code Grantの場合必須になります。

2. リンクを踏んで遷移する

(https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be より拝借)

あとは、dj-rest-authがよしなにやってくれます。

さっきのリンクを踏んでみて、ログインしてみましょう。
すると

のような感じになると思います。

ここで、codeが上にあると思うので、それをコピペしてPOSTすれば終わりです！！！！
っと言いたいところですが、URLエンコードという概念があり、URL経由でコピペされたものはエンコードされてしまします。
なので、残念ですが、このやり方で確認したい場合、モジュールのコードを直いじりする必要があります。

lib/python3.10/site-packages/allauth/socialaccount/providers/oauth2/client.py

from urllib.parse import unquote

    def get_access_token(self, code):
        data = {
            "redirect_uri": self.callback_url,
            "grant_type": "authorization_code",
            "code": unquote(code), #unquoteを追加
        }

っとモジュールのソースコードを変更してあげれば、無事いつものソーシャルログインのように自動でユーザーが作られ、アクセストークンとリフレッシュトークンが発行されるはずです。

また、DRFのView経由ではなく、curlを使った場合

curl -d "client_id=*****.apps.googleusercontent.com" -d "client_secret=*****" -d "redirect_uri=http://127.0.0.1:8000/api/social/login/google/" -d "grant_type=authorization_code" -d "code=*****" https://oauth2.googleapis.com/token

でいけると思います。

沼ったところ

ソーシャルログイン自体を理解していなかった
なんか適当にやってたけど、ちゃんとOAuthの概念を理解した方が結果的に早かった
モジュールのバージョン
dj-rest-authのモジュールを昔のバーションで固定で入れてたので、URLが変わっていることに気が付かなかった
URLエンコード
以下のエラーに死ぬほど悩まされた。

  File "/Users/****/next-drf-blog-auth-book/env/lib/python3.10/site-packages/allauth/socialaccount/providers/oauth2/client.py", line 109, in get_access_token
    raise OAuth2Error("Error retrieving access token: %s" % resp.content)
allauth.socialaccount.providers.oauth2.client.OAuth2Error: Error retrieving access token: b'{\n  "error": "invalid_grant",\n  "error_description": "Malformed auth code."\n}'

上記の通り、URLエンコードの概念を知らなかったので、URLのコピペでは認証コードが変換されてるから、そりゃ不正なコードっていいますわな。色々疑ってすまんかったな。ワイが無知やったで。