アホほど簡単な
Google Sign-In
安全で安心で簡単に
ログインの仕組み作れないかな？
ってことでいくつか
OAuth に試した中で
アホほど簡単だった
Google Sign-In について
説明していきます
GCP にプロジェクトを作成
1
クライント ID の作成
2
OAuth の同意
認証情報の作成
クライアントでの認可
3
サインインのコードを書く
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google Sign-in</title>
<!-- 1. ライブラリを読み込む -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- 2. クライント ID を指定する -->
<meta name="google-signin-client_id" content="{CLIENT_ID}">
</head>
<body>
<!-- 3. ボタンを設置する -->
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<!-- 4. サインインしてプロフィール情報を取得する -->
<script>
function onSignIn(googleUser) {
const profile = googleUser.getBasicProfile()
console.log(profile)
}
</script>
</body>
</html>
サインアウトのコードを書く
<body>
<!-- 1. ボタンを設置する -->
<button type="button" onclick="signOut()">Sign out</button>
<!-- 2. サインアウトする -->
<script>
function signOut() {
const auth2 = gapi.auth2.getAuthInstance()
auth2.signOut().then(() => {
console.log('サインアウトしました')
})
}
</script>
</body>
バックエンドサーバーでの認可
5
トークンを
バックエンドサーバに送る
<body>
<script>
function onSignIn(googleUser) {
// 1. トークンを取得する
const { id_token } = googleUser.getAuthResponse()
// 2. トークンを POST する
fetch('http://localhost:8081/', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `idToken=${id_token}`
})
}
</script>
</body>
トークンが有効であるか確認
const express = require('express')
const bodyParser = require('body-parser')
const { OAuth2Client } = require('google-auth-library')
const CLIENT_ID = '{CLIENT_ID}'
const app = express()
const client = new OAuth2Client(CLIENT_ID)
app.use(bodyParser.urlencoded({ extended: true }))
app.post('/', async (req, res) => {
const { idToken } = req.body
const ticket = await client.verifyIdToken({
idToken,
audience: CLIENT_ID,
})
const payload = ticket.getPayload()
const userid = payload['sub']
const email = payload['email']
console.log(userid, email)
res.send('OK')
})
app.listen(8081, 'localhost')
// 1. ライブラリを読み込む
const { OAuth2Client } = require('google-auth-library')
// 2. インスタンスを生成
const client = new OAuth2Client(CLIENT_ID)
app.post('/', async (req, res) => {
// 3. トークンを取得
const { idToken } = req.body
// 4. トークンを検証する
const ticket = await client.verifyIdToken({
idToken,
audience: CLIENT_ID,
})
// 5. 検証結果からユーザ情報を取得する
const payload = ticket.getPayload()
const userid = payload['sub']
const email = payload['email']
console.log(userid, email)
})
重要な部分だけ抜き出してみる
セッション管理も出来ているので
あとはお好きなようにどうぞ
DEMO のリポジトリ
Google 以外の
OAuth も使いたいのであれば
Firebase Authentication
手軽にやりたいのであれば
Firebase UI
サービスが
ユーザのログイン情報を扱うより
ユーザにとっても
開発者にとっても
安全で安心で簡単
認可してもらいましょう
END
アホほど簡単な Google Sign-In
By Syuji Higa
