Googleログインの認証フローってどんなのさ
先日、Supabaseを使ってGoogleログイン機能を実装したので、これを機にOAuthもといGoogle認証のフローを整理してみた。備忘録的なところもあるため、誤りがあればご指摘いただけると嬉しいです！
OAuthとは？
OAuth (Open Authorization) とは、ユーザーが自身のログイン情報（ユーザー名やパスワード）を他のサイトやアプリケーションに直接提供することなく、第三者のアプリケーションにアクセス権を与えるための標準的な認証プロトコルです。OAuthを利用することで、セキュリティを高め、ユーザーのプライバシーを保護することができます。
例として、「Googleでログイン」機能を持つアプリAで考えてみる。
このアプリAでは、ユーザー登録の際にGoogleアカウントの名前やアイコン画像をそのまま使用できる。
このとき、アプリA上でGoogleのメールアドレスやパスワードを直接入力させることはなく、Googleの認証画面で認証するだけでアプリAに必要なアカウント情報を安全に提供できる。
Googleでの認証フローについて
では、上記の例のような一連の処理はどのように行われるか。
Google認証を利用したアカウント情報取得までの流れとなります。
登場物
- ユーザー：操作する人。あなたや私。
- クライアントアプリ：あなたが操作するアプリ。（Googleじゃない方）
- 認可サーバ：ユーザーの認証と認可を管理し、アクセストークンなどを発行する。今回でいえばGoogle。
認証の流れ
- 「Googleでログイン」などをクリックします。
- クライアントアプリからGoogleの認可サーバに認証リクエストを送信します。
- 認証リクエストによりGoogleの認証画面へリダイレクトされ、Googleアカウントへのログイン、クライアントアプリによるアカウント情報へのアクセス許可を求められます。
- ユーザーがアクセスを許可すると、Googleの認可サーバからクライアントアプリに対して認証コードが送信されます。この認証コードは一時的なもので、クライアントアプリがユーザーの同意を得たことを証明します。
- クライアントアプリは認証コードを使用して、Googleの認可サーバからアクセストークンを取得します。アクセストークンはクライアントアプリがユーザーのデータにアクセスするために必要なもので、一定期間有効です。
- クライアントアプリはアクセストークンを使用して、Googleアカウントの情報を取得します。
ログイン状態の判定
アカウント情報へのアクセスを例に見ましたが、ユーザーがログイン状態であるかの判定においてはアクセストークンの有無とその有効期限によってログイン状態を判定します。
アクセストークンは通常1時間程度有効。ログイン状態でのみ許可される操作を行う際、APIリクエストにアクセストークンを含めます。認証ライブラリを用いてアクセストークンの有効期限を確認し、期限切れであればリフレッシュトークンというものを使用して新しいアクセストークンを取得します。
リフレッシュトークンは長時間有効で、アクセストークンと一緒に受け取ります。リフレッシュトークンを認可サーバに送信することで、新しいアクセストークンとリフレッシュトークンを取得できます。これにより、ユーザーが再度認証作業を行うことなくログイン状態を維持できます。
なぜリフレッシュトークンが必要なのか？
リフレッシュトークンがなければ、アクセストークンの有効期限が切れるたびにユーザーは再度ログインしなければならなくなります。例えば、アクセストークンの有効期限が1時間の場合、ユーザーは1時間ごとに再認証する必要があります。これはユーザー体験を大きく損ない、煩雑さを増します。
リフレッシュトークンを使用することで、バックグラウンドで新しいアクセストークンを取得できるため、ユーザーは一度ログインした後、長期間にわたってシームレスにサービスを利用することができます。これにより、ユーザー体験が向上し、セキュリティも維持されます。
まとめ
SupabaseとNuxtでGoogle認証機能を実装した記事もありますので、興味があれば暇つぶしにでも。
認証フローとかを整理して、あらためてSupabaseでの実装を見ると、複雑なトークン管理（有効期限の確認やら、再発行などなど）を一手にやってくれてて、とても楽に利用できるようにしてくれているんだなと...。フロントエンド民のわいにとっては感謝しかない。
Discussion