Google アカウントを用いた認証機能は、モバイルアプリやウェブアプリにおいて、ユーザー体験を向上させる重要な要素の一つです。本記事では、Django（バックエンド） と React Native（フロントエンド） を組み合わせて Google アカウント認証を実装する方法を、ステップごとに詳しく解説します。

---

概要

この記事では以下のことを実現します：

1. Google OAuth 2.0 を利用した認証フローの実装。
2. Django REST Framework を用いて、Google トークンを検証する API を作成。
3. React Native で Google サインインを実現し、バックエンドと連携。

---

必要な環境

• Django 4.x+
• Django REST Framework
• React Native
• Google Cloud Platform（GCP）アカウント

---

1. Google Cloud Console の設定

1. プロジェクトの作成

   • Google Cloud Console にアクセスし、新しいプロジェクトを作成します。

2. OAuth 同意画面の設定

   • ナビゲーションメニューから 「API とサービス」 > 「OAuth 同意画面」 を選択。
   • 外部または内部を選択し、必要な情報を入力します（アプリ名、メールアドレスなど）。

3. OAuth クライアントIDの作成

   • 「認証情報」 タブで 「認証情報を作成」 をクリックし、OAuth クライアントIDを選択。
   • アプリケーションの種類に応じて 「Web アプリケーション」 を選択。
   • リダイレクト URI にバックエンド API の URL を指定します。
     • 例：http://localhost:8000/api/auth/google/

4. クライアントID とクライアントシークレットの取得

   • 作成後、OAuth クライアントIDとシークレットをコピーして保存します。

---

2. Django バックエンドの構築

パッケージのインストール

Google 認証を処理するために、以下のライブラリをインストールします：

pip install django djangorestframework google-auth django-rest-framework-simplejwt

• google-auth: Google トークンの検証用。
• djangorestframework-simplejwt: JWT トークンによる認証をサポート。

---

設定ファイルの更新

settings.py を以下のように編集します。

INSTALLED_APPS += [
    'rest_framework',
    'rest_framework_simplejwt',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
}

# Google OAuth 2.0 クライアント情報
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'your-google-client-id'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'your-google-client-secret'

---

カスタムビューの作成

次に、Google トークンを検証し、認証を処理する API を作成します。

views.py に以下のコードを追加します：

from google.oauth2 import id_token
from google.auth.transport import requests as google_requests
from django.contrib.auth.models import User
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from rest_framework_simplejwt.tokens import RefreshToken

class GoogleLoginAPIView(APIView):
    def post(self, request):
        token = request.data.get('token')
        if not token:
            return Response({"error": "Token is required"}, status=status.HTTP_400_BAD_REQUEST)

        try:
            # Google トークンの検証
            idinfo = id_token.verify_oauth2_token(
                token, google_requests.Request(), "your-google-client-id"
            )
            email = idinfo.get('email')
            name = idinfo.get('name')

            # ユーザーが存在するか確認
            user, created = User.objects.get_or_create(
                username=email, defaults={'first_name': name}
            )

            # JWT トークンを生成
            refresh = RefreshToken.for_user(user)
            return Response({
                'refresh': str(refresh),
                'access': str(refresh.access_token),
            })

        except ValueError:
            return Response({"error": "Invalid token"}, status=status.HTTP_400_BAD_REQUEST)

---

URL の設定

Google 認証用のエンドポイントを設定します：

from django.urls import path
from .views import GoogleLoginAPIView

urlpatterns = [
    path('api/auth/google/', GoogleLoginAPIView.as_view(), name='google_login'),
]

---

3. React Native フロントエンドの構築

必要なパッケージのインストール

React Native 側で Google 認証を処理するために、以下のライブラリをインストールします：

npm install @react-native-google-signin/google-signin @react-native-async-storage/async-storage

---

Google Sign-In の設定

App.js または適切なコンポーネントで、Google Sign-In を設定します：

import React from 'react';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  webClientId: 'your-google-web-client-id',
});

const signInWithGoogle = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    const idToken = userInfo.idToken;

    // Django バックエンドにトークンを送信
    const response = await fetch('http://localhost:8000/api/auth/google/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token: idToken }),
    });

    const data = await response.json();
    console.log('JWT Tokens:', data);
  } catch (error) {
    console.error(error);
  }
};

---

ユーザーデータの保存

JWT トークンを安全に保存するために、AsyncStorage を使用します：

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('userToken', token);
  } catch (e) {
    console.error('Failed to save the token', e);
  }
};

---

まとめ

上記の手順を実装することで、Google アカウントを利用した認証機能を Django と React Native に組み込むことができます。このシステムにより、以下のフローが実現します：

1. React Native でユーザーが Google アカウントにログイン。
2. Django サーバーが Google トークンを検証し、ユーザーを認証。
3. Django が JWT トークンを発行し、クライアントに返す。
4. React Native がトークンを保存して、認証付きの API リクエストを実行可能にする。

Google アカウント認証は、ユーザーにとって簡単かつ安全なログイン方法を提供するための有効な手段です。ぜひ、あなたのプロジェクトに導入してみてください！