<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/733233b1b8884371bcb20181d0911fa7/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/2a750075287c4dbb96059adc4ed93155/Screenshot%20from%202024-04-01%2022-59-54.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/cf213cf0d3d0442f8f62e6ad63e88130/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ef375ca6f364478397e86f9703993e61/Screenshot%20from%202024-04-01%2023-02-53.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d3a28bba2ba843908323d1f8b0ac1526/Screenshot%20from%202024-04-01%2023-12-44.png" alt="">短文を投稿するのと自分の投稿を一覧表示するシンプルな画面を作りました。ちなみに、投稿画面だけちょっといい感じのスタイルになってるのはChatGPTさんに作ってもらったからです。html+cssだったらかなり上出来でいいなと思いました。

成果物

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/03a5facc8c3f4d91bf2cad40c35d2487/google_oauth_example_dynamo.png" alt="">追加の要素としては、データ永続化層が必要なので、DynamoDBが増えたというところだけです。

インフラ

認証（IDトークンを取得する）フローについては前回までの内容と同じなので省略します。認証後のフローとしては、IDトークン・アクセストークンをセッションストレージに保存し、それを持ってアプリ固有の保護対象リソースにアクセスするAPIを呼び出します。今回は投稿機能ということで、投稿内容を一覧取得するAPIと、投稿するAPIの2本を作成しました。 以下は投稿時のフロー図です。認可サーバのユーザ情報取得APIと投稿API、投稿一覧取得APIの計3本のAPIを叩きます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/65d87407f98545dcaa8a7fedd281e50e/oauth2.0_dynamo.png" alt="">

フロー図

Users<ul><li>issuer（パーティションキー）</li><li>subject（ソートキー）</li><li>id</li><li>createdAt</li><li>updatedAt</li></ul> Microposts<ul><li>userId（パーティションキー）</li><li>postedAt（ソートキー）</li><li>content</li><li>createdAt</li><li>updatedAt</li></ul> Usersの用途としては、IDトークンのissとsubからアプリ固有のidにマッピングするのが目的です。IDトークンの仕様上、issとsubの組み合わせでグローバルに一意になることが保証されるためです。こうしておくことで、もし他のIDProviderが増えても問題ない作りになっています。 Micropostsが投稿を保存するためのテーブルです。主にユーザに紐づく投稿を一覧取得する目的なので、userId, postedAtの複合主キーとしました。ただ、投稿を一意に指定できるIDもあったほうが良かったかもしれません。今の形だと、例えば特定の投稿を更新したい場合に、「自分が投稿した投稿日時yyyy-MM-dd hh:mm:ssの投稿を更新してください」のようなぎこちない指定方法になってしまうためです。

テーブル設計

設計

src/routes/callback/+page.svelte<pre><code>@@ -1,4 +1,5 @@
&nbsp;&lt;script lang="ts"&gt;
+	import { goto } from '$app/navigation';
&nbsp;	import { error } from '@sveltejs/kit';
&nbsp;	import axios, { type AxiosResponse } from 'axios';
&nbsp;	import { onMount } from 'svelte';
@@ -22,6 +23,10 @@
&nbsp;			code: queryParams.code,
&nbsp;		});
&nbsp;
+		// トークンをセッションストレージに保存
+		sessionStorage.setItem('access_token', res.data.access_token);
+		sessionStorage.setItem('id_token', res.data.id_token);
+
&nbsp;		// userinfoエンドポイントにアクセス
&nbsp;		const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
&nbsp;		userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${res.data.access_token}`}});
@@ -32,6 +37,7 @@
&nbsp;{#if userInfoRes}
&nbsp;	&lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
&nbsp;	&lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
+	&lt;button on:click={() =&gt; goto("/microposts")}&gt;投稿&lt;/button&gt;
&nbsp;{:else}
&nbsp;	&lt;h1&gt;ログインしています...&lt;/h1&gt;
&nbsp;{/if}</code></pre> src/routes/microposts/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import axios, { type AxiosResponse } from 'axios';
 import dayjs from 'dayjs';
 import { onMount } from "svelte";

 let access_token: string;
 let id_token: string;
 let userInfoRes: AxiosResponse;
 let micropostRes: AxiosResponse;
 let content: string;

 onMount(async () =&gt; {
 // セッションストレージからトークンを取得
 access_token = sessionStorage.getItem('access_token') ?? '';
 id_token = sessionStorage.getItem('id_token') ?? '';

 // userinfoエンドポイントにアクセス
 const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
 userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${access_token}`}});
 console.log(userInfoRes);

 // 投稿一覧取得APIにアクセス
 micropostRes = await axios.get('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {headers: {Authorization: `Bearer ${id_token}`}});
 console.log(micropostRes);
 });

 async function post() {
 // 投稿
 await axios.post('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {content: content}, {headers: {Authorization: `Bearer ${id_token}`}});
 // リロード
 micropostRes = await axios.get('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/microposts', {headers: {Authorization: `Bearer ${id_token}`}});
 console.log(micropostRes);
 // インプットを空にする
 content = ''
 }
&lt;/script&gt;

&lt;h1&gt;投稿&lt;/h1&gt;
{#if userInfoRes &amp;&amp; micropostRes}
&lt;div style="max-width: 600px; margin: 20px auto;"&gt;
 {#each micropostRes.data as micropost}
 &lt;div style="border-bottom: 1px solid #ccc; padding: 10px 0; display: flex; align-items: center;"&gt;
 &lt;img style="width:50px; height:50px; border-radius:50%; margin-right:10px;" src={userInfoRes.data.picture} alt="facePicture"&gt;
 &lt;div style="flex-grow: 1;"&gt;
 &lt;h3 style="margin:0; font-size:18px;"&gt;{userInfoRes.data.name}&lt;/h3&gt;
 &lt;p style="margin:5px0; font-size:14px; color:#555;"&gt;{micropost.content}&lt;/p&gt;
 &lt;p style="margin:5px0; font-size:14px; color:#555;"&gt;{dayjs(micropost.postedAt).format('YYYY-MM-DD HH:mm:ss')}&lt;/p&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 {/each}
 &lt;div style="padding: 10px 0; display: flex; align-items: center;"&gt;
 &lt;div style="flex-grow: 1;"&gt;
 &lt;input style="display: inline-block; width: calc(100% - 6em);" type="text" bind:value={content} /&gt;
 &lt;button on:click={post}&gt;投稿&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
{/if}</code></pre>

フロントエンド

app.py<pre><code>@@ -3,6 +3,8 @@ import logging
&nbsp;import requests
&nbsp;import boto3
&nbsp;import urllib
+from chalicelib.models import Microposts
+from chalicelib.utils import login
&nbsp;
&nbsp;
&nbsp;app = Chalice(app_name="XXXXXXXXXXXXXXXXX")
@@ -39,3 +41,32 @@ def index():
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return Response(body={"message": "server error"}, status_code=500)
&nbsp;
&nbsp; &nbsp; &nbsp;return res.json()
+
+
+@app.route("/microposts", methods=["POST"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXXXX"))
+def post():
+&nbsp; &nbsp; try:
+&nbsp; &nbsp; &nbsp; &nbsp; user = login(app, CLIENT_ID)
+&nbsp; &nbsp; except Exception:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; req = app.current_request.json_body or {}
+&nbsp; &nbsp; if "content" not in req:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; micropost = user.post(req["content"])
+&nbsp; &nbsp; micropost.save()
+
+&nbsp; &nbsp; return Response(body={"posted_at": micropost.postedAt.isoformat()}, status_code=201)
+
+
+@app.route("/microposts", methods=["GET"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXX"))
+def get_list():
+&nbsp; &nbsp; try:
+&nbsp; &nbsp; &nbsp; &nbsp; user = login(app, CLIENT_ID)
+&nbsp; &nbsp; except Exception:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body={"message": "server error"}, status_code=500)
+
+&nbsp; &nbsp; posts = Microposts.query(user.id)
+&nbsp; &nbsp; res = [post.to_simple_dict() for post in posts]
+&nbsp; &nbsp; return Response(body=res, status_code=200)</code></pre> chalicelib/utils/login.py<pre><code>import jwt
from chalice import Chalice
from chalicelib.models import Users


def login(app: Chalice, client_id: str) -&gt; Users:
 if "Authorization" not in app.current_request.headers:
 raise Exception

 id_token = app.current_request.headers["Authorization"].removeprefix("Bearer ")

 jwks_client = jwt.PyJWKClient("https://www.googleapis.com/oauth2/v3/certs")
 try:
 signing_key = jwks_client.get_signing_key_from_jwt(id_token)
 payload = jwt.decode(
 id_token,
 signing_key.key,
 algorithms=["RS256"],
 audience=client_id,
 )
 except Exception as e:
 app.log.error(e)
 raise Exception

 count = Users.count(payload["iss"], Users.subject == payload["sub"])
 if count == 0:
 u = Users(issuer=payload["iss"], subject=payload["sub"])
 u.save()

 return Users.get(payload["iss"], payload["sub"])</code></pre> 一旦app.pyにベタ書きで済ませたかったのですが、UsersのインスタンスをreturnしようとするとChaliceResponceでラッピングされてしまうようだったので、utilに切り出しました。

バックエンド

今回、IDトークンを利用する実装を行ったので、nonce検証に対応しました。nonce検証はインプリシットフローでは必須となっています。そもそもnonce検証の目的は、リプレイアタックへの対策です。リプレイアタックとは簡単に言うと、URLのフラグメントに設定されたトークンだけを別のトークンに置き換える攻撃のことです。インプリシットフローでは必須と書きましたが、その理由としてはURLにトークンが含まれるため、履歴などから簡単に抜き取れるためです。ただ、フロント実装はいくらでも手元で変更できるので、あまり対策になっていない気もします・・・あと、認可コードフローでもURLに認可コード含まれない？と一瞬思いましたが認可コードは1回しか使えないので使用済みのものを抜き取っても使えないですね。認可コードフロー強し。 src/routes/implicit/callback/+page.svelte<pre><code>@@ -22,6 +22,13 @@
&nbsp;			error(401, { message: 'Invalid state parameter.' });
&nbsp;		}
&nbsp;
+		// nonceの検証
+		const sessionNonce = sessionStorage.getItem('nonce');
+		const payload = JSON.parse(decodeURIComponent(atob(fragmentArgs.id_token.split('.')[1])));
+		if (sessionNonce != payload.nonce) {
+			error(401, { message: 'Invalid nonce parameter.' });
+		}
+
&nbsp;		// トークンをセッションストレージに保存
&nbsp;		sessionStorage.setItem('access_token', fragmentArgs.access_token);
&nbsp;		sessionStorage.setItem('id_token', fragmentArgs.id_token);</code></pre>

nonceに対応する

実装

今回は、アプリ固有の機能として投稿機能を実装し、その中でIDトークンを利用するようになったことからnonceの検証にも対応しました。

最後に

「Googleでログイン」を実装してみた（その３）

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/55a5e7124d97406eb7560dca4d9a56d3/Screenshot%20from%202024-03-26%2022-18-30.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/14c358cc482e4e629a0e37c7a6042a0c/Screenshot%20from%202024-03-26%2022-20-00.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/41963139eece4a459bac601f42c9f7bc/Screenshot%20from%202024-03-26%2022-21-12.png" alt="">ぶっちゃけ見た目的にはほとんど何も変わってないです・・・

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/24752de02e534d318b401d8af6e17ec5/google_oauth_example_implicit.png" alt="">認可エンドポイントしか使用しないのでバックエンドは不要になりました。

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/1c656de1d3d3404a97999e442297218d/oauth2.0_implicit.png" alt="">認可コードフローの場合は認可エンドポイントから認可コードが返ってきて、それをアクセストークンと交換する必要があったのですが、インプリシットフローの場合は直接アクセストークンが返ってきます。前回よりもぐっとシンプルになりました。

認可コードフローが実装できればインプリシットフローはほぼ同じです。以下、フロント実装の差分です。<pre><code>diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 659e6e5..910dc9d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -23,7 +23,31 @@
&nbsp;		const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
&nbsp;		location.href = href;
&nbsp;	}
+
+	async function implicitLogin() {
+		// ディスカバリドキュメントを参照
+		const discoverRes = await axios.get('https://accounts.google.com/.well-known/openid-configuration');
+		sessionStorage.setItem('discoverDoc', JSON.stringify(discoverRes.data));
+
+		// 認可エンドポイントへのリクエストパラメータ設定
+		const params = {
+			response_type: 'token id_token',
+			client_id: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com',
+			scope: 'openid profile email',
+			redirect_uri: 'https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/implicit/callback',
+			state: Math.random().toString(32).substring(2),
+			nonce: Math.random().toString(32).substring(2)
+		};
+
+		sessionStorage.setItem('state', params.state);
+		sessionStorage.setItem('nonce', params.nonce);
+
+		// 認可エンドポイントへ遷移
+		const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
+		location.href = href;
+	}
&nbsp;&lt;/script&gt;
&nbsp;
&nbsp;&lt;h1&gt;ログイン&lt;/h1&gt;
&nbsp;&lt;p&gt;&lt;button on:click={login}&gt;Googleでログイン&lt;/button&gt;&lt;/p&gt;
+&lt;p&gt;&lt;button on:click={implicitLogin}&gt;Googleでログイン(Implicit)&lt;/button&gt;&lt;/p&gt;
diff --git a/src/routes/implicit/callback/+page.svelte b/src/routes/implicit/callback/+page.svelte
new file mode 100644
index 0000000..efac8cb
--- /dev/null
+++ b/src/routes/implicit/callback/+page.svelte
@@ -0,0 +1,36 @@
+&lt;script lang="ts"&gt;
+	import { error } from "@sveltejs/kit";
+	import axios, { type AxiosResponse } from "axios";
+	import { onMount } from "svelte";
+	let userInfoRes: AxiosResponse;
+
+&nbsp; &nbsp; onMount(async () =&gt; {
+&nbsp; &nbsp; &nbsp; &nbsp; const fragment = window.location.hash;
+&nbsp; &nbsp; &nbsp; &nbsp; const keyValueArgs = fragment.substring(1).split('&amp;');
+&nbsp; &nbsp; &nbsp; &nbsp; let fragmentArgs: Record&lt;string, string&gt; = {};
+&nbsp; &nbsp; &nbsp; &nbsp; for (const keyValue of keyValueArgs) {
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const [key, value] = keyValue.split('=');
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fragmentArgs[decodeURIComponent(key)] = decodeURIComponent(value);
+&nbsp; &nbsp; &nbsp; &nbsp; }
+&nbsp; &nbsp; &nbsp; &nbsp; console.log(fragmentArgs);
+
+		// 送られてきたstateが一致しているか確認
+		const sessionState = sessionStorage.getItem('state');
+
+		if (fragmentArgs.state != sessionState) {
+			error(401, { message: 'Invalid state parameter.' });
+		}
+
+&nbsp; &nbsp; &nbsp; &nbsp; // userinfoエンドポイントにアクセス
+		const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
+		userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${fragmentArgs.access_token}`}});
+		console.log(userInfoRes);
+&nbsp; &nbsp; });
+&lt;/script&gt;
+
+{#if userInfoRes}
+	&lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
+	&lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
+{:else}
+	&lt;h1&gt;ログインしています...&lt;/h1&gt;
+{/if}</code></pre>

設計も実装もシンプルなインプリシットフローは魅力的に見えてしまうのですが、OAuth2.0で推奨されているのは認可コードフローの方です。インプリシットフローではアクセストークンやIDトークンが直接コールバックエンドポイントのURLのフラグメントとして付与されます。URLフラグメントはブラウザの履歴に残るため、履歴を閲覧できる立場であれば過去に発行されたトークンを抜き取ることが簡単にできてしまいます。対策としては、トークンの有効期限を短めに設定することが重要だと思います。 他にもセキュリティ的に考慮すべき点がいくつかあるようですが、深掘っていくとそれだけでかなりのボリュームになりそうなので、別の機会に譲ろうと思います。

インプリシットフローのセキュリティホールについて

今回は、OIDCのインプリシットフローを実装してみました。実装してみて、認証コードフローをしっかりと押さえていればよりシンプルな形になっただけなのでかなりハードルが低いように思えました。

まとめ

「Googleでログイン」を実装してみた（その２）

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b590b4bc231e423a9f3637ae996dae9f/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/bd7ce0a4b28c42168648346657a5b010/Screenshot%20from%202024-03-23%2018-20-57.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/9c676aa0560942bfaa9d600c65417704/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/32d6a3e9b18549e4bb0e4b4f6c1fb69c/Screenshot%20from%202024-03-23%2018-23-11.png" alt="">たったのこれだけです。

今回は以下のようなインフラ構成で実現しました。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/81ae802b06b645568065fb11d864edf9/google_oauth_example.png" alt="">ざっくりと説明するとフロントエンドがCloudFront + S3で静的サイト配信しJSで認可コードを取得、バックエンドがAPI Gateway + Lambdaでフロントで取得した認可コードを使ってトークン取得を取得します。

図にするとこんな感じです。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b0ae281a05b04625a7f72893015b9b6b/oauth2.0_code_spa.png" alt=""> <ol><li>アプリのURLにアクセスするとCloudFrontからJSなどの静的コンテンツが返される</li><li>ブラウザ上のJSから、Googleの認可エンドポイントにアクセスする<ol><li>その際、リクエストにクライアントIDとコールバックURLを含める</li></ol></li><li>Googleの認可画面が表示されるので、ユーザが（ログインしていなければログインした上で）認可を行う</li><li>認可エンドポイントにアクセス時に渡していたコールバックURLにリダイレクトする<ol><li>その際、認可コードを受け取る</li></ol></li><li>ブラウザ上のJSから、API Gatewayに対してトークン取得リクエストを送る<ol><li>その際、リクエストに認可コードを含める</li></ol></li><li>API Gatewayからトークンエンドポイントにアクセスし、アクセストークンやIDトークンなどを受け取る</li><li>ブラウザ上のJSから、Googleのuserinfoエンドポイントにアクセスしユーザ情報を取得する<ol><li>その際、リクエストにアクセストークンを含める</li></ol></li></ol>

まず考えられるのは認可コードをバックエンドに送信していますが、このバックエンドはSSGからのリクエストを受け付ける必要がありパブリックアクセスを許容する必要があるので、どこからでもアクセスできてしまいます。そうすると攻撃者が総当り的に認可コードを大量に送ると、ユーザのアクセストークンを奪うことができてしまう可能性があるかなと思います。当然CORSは設定していますが、APIを直で叩く場合は関係ないです。ただ少なくとも使用済みの認可コードは使えなくなるので、実際にその攻撃が成功する可能性は極めて低いと思います。 他には、同じくフロント・バック通信のところで、リクエスト・レスポンスを平文でやり取りしているため、万が一通信が傍受されると同様にアクセストークンが奪われる可能性がありそうです。公開鍵暗号を使おうとしても結局フロントがSSGなので秘密鍵を安全に保管することができないと思います。ただ、Googleからはアクセストークンがそのまま送られてくるわけで、お門違いな心配をしているような気もします。

セキュリティ的にどうなのか考えてみる

セキュリティの点はすぐに結論がでなそうなのでじっくり考えようと思います。その他で今後やってみたいこととしては、<ul><li>インプリシットフローを試す</li><li>保護対象リソースを構築して実際にアプリ固有のユーザ情報を取得する</li><li>認可スコープを増やしてGoogleカレンダーなどにアクセスしてみる</li></ul>このあたりが実装できたらまた記事にしたいと思います。

ネクストアクション

フロントは個人的にシンプルで好きなsvelteを使っています。 src/routes/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import axios from "axios";

 async function login() {
 // ディスカバリドキュメントを参照
 const discoverRes = await axios.get('https://accounts.google.com/.well-known/openid-configuration');
 sessionStorage.setItem('discoverDoc', JSON.stringify(discoverRes.data));

 // 認可エンドポイントへのリクエストパラメータ設定
 const params = {
 response_type: 'code',
 client_id: 'XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com',
 scope: 'openid profile email',
 redirect_uri: 'XXXXXXXXXXXXXXXXXXXXXXXXXX/callback',
 state: Math.random().toString(32).substring(2),
 nonce: Math.random().toString(32).substring(2)
 };

 sessionStorage.setItem('state', params.state);
 sessionStorage.setItem('nonce', params.nonce);

 // 認可エンドポイントへ遷移
 const href = `${discoverRes.data.authorization_endpoint}?response_type=${params.response_type}&amp;client_id=${params.client_id}&amp;scope=${params.scope}&amp;redirect_uri=${params.redirect_uri}&amp;state=${params.state}&amp;nonce=${params.nonce}`;
 location.href = href;
 }
&lt;/script&gt;

&lt;h1&gt;ログイン&lt;/h1&gt;
&lt;p&gt;&lt;button on:click={login}&gt;Googleでログイン&lt;/button&gt;&lt;/p&gt;</code></pre> src/routes/callback/+page.svelte<pre><code>&lt;script lang="ts"&gt;
 import { error } from '@sveltejs/kit';
 import axios, { type AxiosResponse } from 'axios';
 import { onMount } from 'svelte';
 let queryParams;
 let userInfoRes: AxiosResponse;

 onMount(async () =&gt; {
 // コールバックエンドポイントにリダイレクトしてきた際のクエリパラメータを取得
 const params = new URLSearchParams(window.location.search);
 queryParams = Object.fromEntries(params.entries());

 // 送られてきたstateが一致しているか確認
 const sessionState = sessionStorage.getItem('state');

 if (queryParams.state != sessionState) {
 error(401, { message: 'Invalid state parameter.' });
 }

 // バックエンドからトークン取得
 const res = await axios.post('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/get_token', {
 code: queryParams.code,
 });

 // userinfoエンドポイントにアクセス
 const discoverDoc = JSON.parse(sessionStorage.getItem('discoverDoc') ?? '');
 userInfoRes = await axios.get(discoverDoc.userinfo_endpoint, {headers: {Authorization: `Bearer ${res.data.access_token}`}});
 console.log(userInfoRes);
 });
&lt;/script&gt;

{#if userInfoRes}
 &lt;h1&gt;{userInfoRes.data?.name}&lt;/h1&gt;
 &lt;img src={userInfoRes.data?.picture} alt="facePicture" /&gt;
{:else}
 &lt;h1&gt;ログインしています...&lt;/h1&gt;
{/if}</code></pre>

バックエンドは個人的に好きなScalaとかを使いたかったのですがCI/CDの構築に詰まったので一旦安定のpython(Chalice)で作りました<pre><code>from chalice import Chalice, Response, CORSConfig
import logging
import requests
import boto3
import urllib

app = Chalice(app_name="XXXXXXXXXXXXXXXXXX")
app.log.setLevel(logging.DEBUG)

ssm = boto3.client("ssm")

CLIENT_ID = ssm.get_parameter(Name="/google_oauth/client_id")["Parameter"]["Value"]
CLIENT_SECRET = ssm.get_parameter(Name="/google_oauth/client_secret")["Parameter"]["Value"]
REDIRECT_URI = ssm.get_parameter(Name="/google_oauth/redirect_uri")["Parameter"]["Value"]


@app.route("/get_token", methods=["POST"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXXXXXX"))
def index():
 req = app.current_request.json_body or {}
 if "code" not in req:
 return Response(body={"message": "server error"}, status_code=500)

 body = {
 "code": req["code"],
 "client_id": CLIENT_ID,
 "client_secret": CLIENT_SECRET,
 "redirect_uri": REDIRECT_URI,
 "grant_type": "authorization_code",
 }
 encoded = urllib.parse.urlencode(body)
 res = requests.post(
 "https://oauth2.googleapis.com/token",
 headers={"Content-Type": "application/x-www-form-urlencoded"},
 data=encoded,
 )
 if res.status_code &gt;= 300:
 app.log.error(res.json())
 return Response(body={"message": "server error"}, status_code=500)

 return res.json()</code></pre>

(おまけ)実装

<ul><li><a href="https://amzn.asia/d/6KPSQnn" target="_blank" rel="noopener noreferrer">OAuth徹底入門</a></li><li><a href="https://amzn.asia/d/8c7FfOw" target="_blank" rel="noopener noreferrer">OpenID Connect入門</a></li></ul>

参考文献

「Googleでログイン」を実装してみた（その１）

APIViewの継承時にauthenticationclassesを設定すると、その認証が必要になり、またpermissionclassesを設定するとその権限を持っているものしかAPIViewを起動することができなくなる。(認可)認証と承認の違いだった。以下ものすごくわかりやすい例<blockquote>ある家族が休暇で留守の間、その家のペットを世話するために訪れた人が、施錠されたドアの前に立っている状況を考えてみましょう。この人物には、以下が必要です。 認証：この場合は、家の鍵です。施錠されたドアは、正しい鍵を持つ人だけが開けることができます。これは、システムが正しい資格情報を持つユーザーにのみアクセス権を付与する認証と同じことです。 承認：この場合は、家に入る許可です。家の中では、キッチンに入り、ペットフードを保管している食器棚を開けることができます。しかし、昼寝のために寝室に入る許可（認可）は与えられないでしょう。</blockquote> 参考サイト↓https://torajirousan.hatenadiary.jp/entry/2021/01/01/192820https://www.okta.com/jp/identity-101/authentication-vs-authorization/

認証と承認の違い

authentication_classesとpermission_classesの違い

このサービスは実際に会う日程を画面上で選択し、ユーザーの手間を全て省いた新しいマッチングアプリです。今後の追加機能にも耐えうる設計にし、Navitime, Twilio, Google Map, Tech Coinなどの外部サービスと連携をしています。
また、UI/UXにもこだわり、ユーザーが使いやすいシステムにしました。
現在、YOKUで引き続きサポートさせていただいております。

B2C2Cマッチングアプリ開発

各都道府県ごとにフォーマットの違う提出書類を同じ入力方法で作成できるシステムです。
システム内で取引先、物件、報告書の管理が一元化できるような設計にしました。

ビルメンテンス報告書自動作成システム

従来、エクセル等で管理していた学習管理をWebに移行し、管理コストを大幅に削減するシステム

資格学習サービス

都内大規模オフィス設置台数No.1の新体験エレベータメディアの制作を担当させていただきました。
サイトコンテンツは東京様に持ち寄っていただき、0ベースから制作を行いました。

GRAND

近年、看護師業界や、飲食業界でもスケジューリングの自動化が注目を集めていますが、今回はビルメンテナンス業界での自動スケジューリングのご依頼をいただきました。
ビルメンテナンス業界では幅広い知識と業務に対応するための資格が必要となり、「誰が」「どの業務」を「いつ対応するか」が肝となります。その中でも「定期検査」業務は極めてスケジューリングが難しいのが現状です。
この課題に対して20以上の変数からスケジュールの最適化+自動化を行える社内システムを開発しました。

スケジューリングシステム

公共工事における特殊物の物価をメインに積算結果の集計を実施。積算業務の効率化を行いました。
土木業界は積算の精度とスピードによって売上が大きく変わる業界ですので、過去データの集積がとても重要です。
紙の過去データをOCRで読み込み、検索可能な状態とすることで、これまで「勘」と「経験」に頼っていた業務の見える化が可能となりました。

公共工事積算結果集計システム

オーべラス・ジャパン株式会社様からのご依頼で不動産オーナーと不動産バイヤーを繋ぐマッチングプラットフォームのリニューアルを行いました。今後の不動産データ活用の為に本体サーバー内でデータ集計用のdockerを準備、某AI外部サービスと連携を行いました。UI/UXを含めたデザイン〜データベース設計、使用言語の変更をトータルサポートさせていただき、公開APIではインタフェース設計〜開発・運用までを承っています。 (現在、オーべラス・ジャパン株式会社様から株式会社theREMS様に事業継承されており、引き続きYOKUでサポートを行っております。)

株式会社YOKU

世界一ヨクに満ちた
集団を次々と。

About

Latest Works

B2C2Cマッチングアプリ開発

ビルメンテンス報告書自動作成システム

資格学習サービス

GRAND

スケジューリングシステム

公共工事積算結果集計システム

Tech Blog

「Googleでログイン」を実装してみた（その３）

「Googleでログイン」を実装してみた（その２）

「Googleでログイン」を実装してみた（その１）

authentication_classesとpermission_classesの違い

世界一ヨクに満ちた集団を次々と。

About

Latest Works

B2C2Cマッチングアプリ開発

ビルメンテンス報告書自動作成システム

資格学習サービス

GRAND

スケジューリングシステム

公共工事積算結果集計システム

Tech Blog

「Googleでログイン」を実装してみた（その３）

「Googleでログイン」を実装してみた（その２）

「Googleでログイン」を実装してみた（その１）

authentication_classesとpermission_classesの違い

世界一ヨクに満ちた
集団を次々と。