デモ
React × Django REST Framework で Googleログイン/新規登録 ボタンを実装するチュートリアルです
ソーシャルログインボタンの具体的な作例を通じて、サードパーティ認証(OIDC)に関して理解を深めることができます
この記事は導入偏です
本篇はこちら(part1)から
はじめに
こんにちは
クラウドエンジニアをやっているcokemaniaです
ここ最近、個人WEBアプリ開発にて認証機能にソーシャルログインを使ってみたいと思い
Googleログインボタンの作り方を調べておりました
しかし、見つかった記事はボタンの作成&トークンの発行で終わっているものしかなく
ユーザの新規登録やログイン機能の実装まで解説してくれているものはなかったので
誰もがGoogleユーザ登録とログインの機能を作れるようになればと思い記事に起こしてみました
僕は普段 AWSやGCPなどのクラウドインフラばかり触っているので
プログラミング言語(Python, JavaScript)の知識は乏しいです
こんな僕でも動くものを作ることが出来たので
初学者の方でも是非参考にしてみてください
この記事について
本記事は フロントにReact(JavaSctipt) バックエンドにDjango(Python)を利用したアプリケーションの認証に
react-google-loginによって提供されているGoogleログインボタンを利用するデモアプリを作成していきます
デモアプリの構築を通じてreact-google-login(JavaScript React)やpython-social-auth(Python Django)の仕様だけでなく
認証周りの知識(JWTやOIDC)などの理解も深めることができると思います
このパートを除いて全6パート分あり、めちゃくちゃ長いですので
実践してみる際はお時間あるときにどうぞ
目標
下記内容の達成を目標とします
つまり デモアプリの仕様です
-
新規登録/ログイン ボタンを配置&新規登録/ログイン機能を持たせる - 新規登録時、
Googleに登録されているユーザ情報を取得して、デモアプリのDBに保存する(ユーザ名,email,アイコン画像URL) - ログイン時、GoogleLoginによって発行される
tokenを利用して認証を行い DBからユーザデータを取得する - 新規登録/ログイン実施後に取得したユーザデータを画面に表示させる
簡略化してますが、構成図は以下の通りです
認証フローは下記の通りです
前提知識
下記の知識があると本記事は理解しやすいと思います
というか僕の実施した知識習得内容が以下の通りです
- React JS に対する最低限の知識
- 教本1冊 : React.js & Next.js超入門
- 公式チュートリアル実施済み
- Python に対する最低限の知識
- Django に対する最低限の知識
- 教本1冊 : Python Django 3超入門
- django bros ←オススメ
- DjangoRESTFrameworkに対する最低限の知識
環境
本記事のデモアプリは下記の環境で構築しました
- Google Compute Engine
- Rocky Linux 8.4
- VSCode + RemoteSSHプラグイン
ミドルウェア&ライブラリバージョン
バックエンド
| Name | Version |
|---|---|
| Django | 3.2.11 |
| djangorestframework | 3.13.1 |
| django-cors-headers | 3.10.1 |
| drf-social-oauth2 | 1.2.1 |
| python-decouple | 3.5 |
フロントエンド
| Name | Version |
|---|---|
| node | 17.4.0 |
| npm | 8.3.1 |
リンク
- Part1: Google認証情報作成
- Part2: バックエンド作成
- Part3: フロントエンド作成
- Part4: JWTデコード→ユーザ情報取得
- Part5: ユーザ新規登録
- Part6: 新規登録/ログイン処理後のユーザ情報表示