【絶対にできる！】Googleログインボタンの実装【React × Django REST Framework】

# デモ

![google_login_demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/55a56609-5f3b-3569-9786-f4d24d3398f7.gif)
`React` × `Django REST Framework` で Googleログイン/新規登録 ボタンを実装するチュートリアルです
ソーシャルログインボタンの具体的な作例を通じて、サードパーティ認証(OIDC)に関して理解を深めることができます

この記事は導入偏です
本篇は[こちら(part1)](https://qiita.com/cokemaniaIIDX/items/bdb9a00bef3c6c2365f5)から

## はじめに

こんにちは
クラウドエンジニアをやっている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パート分**あり、めちゃくちゃ長いですので  
実践してみる際はお時間あるときにどうぞ

## 目標

下記内容の達成を目標とします  
つまり デモアプリの仕様です

1. `新規登録/ログイン ボタン`を配置&`新規登録/ログイン機能`を持たせる
2. 新規登録時、`Googleに登録されているユーザ情報`を取得して、デモアプリのDBに保存する(ユーザ名,email,アイコン画像URL)
3. ログイン時、GoogleLoginによって発行される`tokenを利用して認証を行い DBからユーザデータを取得する`
4. 新規登録/ログイン実施後に取得したユーザデータを画面に表示させる

簡略化してますが、構成図は以下の通りです

![structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/dde62818-d488-312a-3441-a52dcdce2b7b.png)

認証フローは下記の通りです

![flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341857/bec628fb-2220-2585-744f-25b3275779d1.png)

## 前提知識

下記の知識があると本記事は理解しやすいと思います  
というか僕の実施した知識習得内容が以下の通りです

- React JS に対する最低限の知識
  - 教本1冊 : [React.js & Next.js超入門](https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
  - [公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)実施済み
- Python に対する最低限の知識
  - [Python入門](https://python.keicode.com/lang/)
- Django に対する最低限の知識
  - 教本1冊 : [Python Django 3超入門](https://www.amazon.co.jp/dp/B08CTVCCQ3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
  - [django bros](https://djangobrothers.com/) **←オススメ**
- DjangoRESTFrameworkに対する最低限の知識
  - [公式チュートリアル](https://www.django-rest-framework.org/tutorial/1-serialization/)1週

## 環境

本記事のデモアプリは下記の環境で構築しました

- 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認証情報作成](https://qiita.com/cokemaniaIIDX/items/bdb9a00bef3c6c2365f5)
- [Part2: バックエンド作成](https://qiita.com/cokemaniaIIDX/items/b0a6a08e02b45efdc9e4)
- [Part3: フロントエンド作成](https://qiita.com/cokemaniaIIDX/items/1cc97143b86e3e0bdd89)
- [Part4: JWTデコード→ユーザ情報取得](https://qiita.com/cokemaniaIIDX/items/a6eef022b6fbaef79730)
- [Part5: ユーザ新規登録](https://qiita.com/cokemaniaIIDX/items/38a30ff881bca1b4b0ad)
- [Part6: 新規登録/ログイン処理後のユーザ情報表示](https://qiita.com/cokemaniaIIDX/items/1d3990ff00dc7429e9f8)

### GitHubでも公開してます！

[cokemaniaIIDX/google-oauth-sample](https://github.com/cokemaniaIIDX/google-oauth-sample)