IDaaSにSign in with Appleをつないでみた

IDaaSにSign in with Apple
をつないでみた
@phr_eidentity
2019/08/02
#idcon
Copyright 2019 Naohiro Fujie

自己紹介
• 役割
• OpenIDファウンデーション・ジャパン理事、KYC WGリーダー
• IDをコアとしたビジネス開発担当。大阪から全国をカバー
• 書き物など
• Blog：IdM実験室（https://idmlab.eidentity.jp）
• 監訳 : クラウド時代の認証基盤 Azure Active Directory 完全解説
• 共著 : クラウド環境におけるアイデンティティ管理ガイドライン
• その他活動
• 日本ネットワークセキュリティ協会アイデンティティ管理WG
• Microsoft MVP for Enterprise Mobility（Jan 2010 -）
• LINE API Expert （Feb 2018 -）
• Auth0 Ambassador（Sep 2018 -）
Copyright Naohiro Fujie, 2019 2

お題
• まず、はじめに
• Azure AD B2C編
• Auth0編
• 注意点
• まとめ

まず、はじめに

AuthZエンドポイント不明
https://developer.apple.com/documentation/signinwithapplerestapi

まずは標準のJSを使ってみる
• 公式ドキュメントの通り
• https://developer.apple.com/documentation/signinwithapplejs/configuring_your_webpage_for_sign_in_with_apple
<html>
<head>
<meta name="appleid-signin-client-id" content=“{client}">
<meta name="appleid-signin-scope" content="name email">
<meta name="appleid-signin-redirect-uri" content="https://{your_redirect_uri}">
<meta name="appleid-signin-state" content="hogehoge">
</head>
<body>
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
<script type="text/javascript" src="https://appleid.cdn-
apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
</body>
</html>

• 認可リクエストを覗いてみる
• Hybrid, scopeはname email, form_post
https://appleid.apple.com/auth/authorize?
client_id={client}&
redirect_uri=https%3A%2F%2F{redirect_uri}&
response_type=code%20id_token&
state=hogehoge&
scope=name%20email&
response_mode=form_post&
frame_id=cce20447-06fb-47cc-92bf-ca85f87febc3&
m=21&
v=1.1.6

• 認可レスポンス（redirect_uriへPOSTされてくる）
state: hogehoge
code: cb5ce09e14e9a4d7cb7b9cdc95c0d82ab.0.nsqtx.5pH1elbG5qgYO4GJHLMQwg
id_token:
eyJraWQiOiJBSURPUEsxIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYX
VkIjoidmluLnJlaXdhLmNs～～省略～～Zw6ToHn_uXOKXRS4lkFguFldNRKPYahVZk_RZ4_UEfZBAYEyvkxxngl8-
_5Yp6L1e39p6t9apnHquj9J80K0N45WNDdj2erF_NUGtmKZQRdqbs9sA0BxbrJVyyJIGrOPO0A6sl-3Lt7LBvHyZg
user: {"name":{"firstName":"Naohiro","lastName":"Fujie"},"email":“xxx@xxxx.jp"}

• Id_tokenの中身を覗いてみる
• c_hashは無い・・・
{
"iss": "https://appleid.apple.com",
"aud": “{client}",
"exp": 1564639728,
"iat": 1564639128,
"sub": "002037.b50e1026dfac4f1db61c47b2095a2928.1501",
"email": “xxx@xxxx.jp"
}
ちなみにsubのスコープは
Teamっぽい

まずは標準のJSを使ってみる＋α
• 返ってきたcodeを使ってtokenエンドポイントを叩いてみる
• https://appleid.apple.com/auth/token *これはドキュメントに書いてある
POST /auth/token HTTP/1.1
Host: appleid.apple.com
Content-Type: application/x-www-form-urlencoded
grant_type=authorization_code&
code=c8117807ab9514cb8b7ab21a6b4422053.0.nsqtx.sviy07qmCL418BjyY4zKVQ&
client_id={client}&
client_secret=eyJhbGciOiJFUzI1NiIsInR～～省略～～F0Tj0TddkrPLIQ
redirect_uri=https%3A%2F%2Fb2cline.azurewebsites.net%2Fapplejs.php
client_secretの作り方は後程

• トークンレスポンス
{
"access_token": "aeed1e957c03e4992bcda1d5f5db74730.0.nsqtx.40F_OL_3UR_QgCqeCGzwbA",
"token_type": "Bearer",
"expires_in": 3600,
“refresh_token”: “r58fb1260e21e4ed09d6b～～省略～～PpcIOA7HFcwxYzCiqg",
“id_token”:
“eyJraWQiOiJBSURPUEsxIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiY
XVkIjoidmluLnJlaXdhLmNsaWVudCIsImV4cCI6MTU2NDY0MTEwMCwiaWF0IjoxNTY0NjQwNTAwLCJzdWIiOiIwM
DIwMzcuYjUwZTEw～～省略～～qb_OQMCsNLWdu1-
21gxtpD2pAeF3bEYed8dOoyxj9u9wNujyg7RVbHCKRPazMx8Hwcvp8W-aU-HpUVxkFl5_qFHY_6rm-
Q0MteUezGRWbhwpAubpS5husq9gc33S_dsc-p1wpSe3nsvIg2uPVU_vwrBn_zwAFknTqI-
4ym_V1fBE9w_2e56qyfJEK9Qew"
}

• Id_tokenの中身を覗いてみる
• at_hashはある
{
"exp": 1564640650,
"iat": 1564640050,
"sub": "002037.b50e1026dfac4f1db61c47b2095a2928.1501",
"at_hash": "Z2Bmd-29JWvbo_mqohgqow",
}

この流れを踏まえてIDaaSに組み込む
• ここまででわかったこと
• エンドポイントは以下の通り
• 認可エンドポイント：https://appleid.apple.com/auth/authorize
• トークンエンドポイント： https://appleid.apple.com/auth/token
• userInfoエンドポイントは見当たらない
• form_postでid_tokenと一緒にuser情報が返ってくる
• 試したIDaaS
• Azure AD B2C
• Auth0

Azure AD B2C編

とりあえずカスタムOPとして追加
まだ標準プロバイダとして
プリセットは存在しない
2019年8月時点の標準IdP：
Amazon, Facebook, Google, QQ, github, WeChat, twitter,
Weibo, Microsoft, LinkedIn

Apple側のServices Id設定
• Return URLsには以下を設定する
• https://login.microsoftonline.com/te/{テナント名}.onmicrosoft.com/oauth2/authresp
• https://{テナント名}.b2clogin.com/{テナント名}.onmicrosoft.com/oauth2/authresp

さっそく壁にあたる
①/.wellknown/openid-
configurationが必須
{
"authorization_endpoint": "https://appleid.apple.com/auth/authorize",
"issuer": "https://appleid.apple.com",
"token_endpoint": "https://appleid.apple.com/auth/token",
"jwks_uri": "https://appleid.apple.com/auth/keys"
}
仕方がないので作る
注）URLが.wellknown/openid-configuration
で終わる必要あり
②client_secretが必要作る（次ページ）
③response_typeに「code
id_token」がない
どちらかに設定して試す

client_secretの作り方
• Appleからダウンロードした鍵で署名したJWTを使う
{
"alg": "ES256",
"typ": "JWT“,
“kid": “{key_id}“
}.{
"sub": “{client_id}",
"nbf": 1560203207,
"exp": 1560289607,
"iss": “{TeamId}",
"aud": "https://appleid.apple.com"
}.[Signature]
基本構造
const jwt = require("jsonwebtoken");
const fs = require("fs");
const privateKey = fs.readFileSync("./authkey.p8");
const token = jwt.sign({}, privateKey, {
algorithm: "ES256",
expiresIn: "60 days",
audience: "https://appleid.apple.com",
issuer: “{TeamId}",
subject: “{client_id}",
keyid: “{key_id}"
});
console.log("The token is:", token);
Auth0の人が書いてたスクリプト
The token is: eyJhbGciOiJFUzI1NiIsInR5ccs～～省略～～z-F0Tj0TddkrPLIQ
Apple Developerサイトで
作ったキーファイル
確認できるTeam Id
作ったキーのId
これをclient_secretとして
使う

注意事項
• client_secretには期限がある（最大6か月）
const jwt = require("jsonwebtoken");
const fs = require("fs");
const privateKey = fs.readFileSync("./authkey.p8");
const token = jwt.sign({}, privateKey, {
algorithm: "ES256",
expiresIn: "60 days",
audience: "https://appleid.apple.com",
issuer: “{TeamId}",
subject: “{client_id}",
keyid: “{key_id}"
});
console.log("The token is:", token);
{
"alg": "ES256",
"typ": "JWT",
"kid": "Q55XN53AWU"
}.{
"iat": 1564635617,
"exp": 1569819617,
"aud": "https://appleid.apple.com",
"iss": "D89GDBS69B",
"sub": “{client}"
}
絶対忘れると思う

response_type問題：codeで
• response_type=code • response_type=id_token

属性情報をどうやってとるか？
• これで認可リクエストを発行
• response_type=code
• response_mode=form_post
• 一応user属性は返ってきている
• が、Azure AD B2Cのredirect_uriが受け取れるはずもなく…
state: StateProperties=eyJTSUQiOiJ4LW～～省略～～CJpJp93DjhQJO4A7UMQ
user: {"name":{"firstName":"Naohiro","lastName":"Fujie"},"email":“xxx@xxxx.jp"}

カスタムポリシーだとどうか？
• 良いところ
• METADATAのURLが割と自由（.well-
known/openid-configurationで終わら
なくても良い）
• response_typeが自由に決められる
• でも結局ユーザ属性は取れない
• ちなみにプロトコルをOAuthにすると
追加パラメータとかも使えるが、
response_modeが使えなくなる（無
視される）。codeだしそりゃそうで
す。

Auth0編

ビルトインで用意されている（ベータ）
ビルトイン版がある！
ちなみにredirect_uriは
標準で
https://{テナント名}.auth0.com/login/callback
カスタムドメインの場合は
https://{カスタムドメイン名} /callback

とりあえず試せる
設定せずに使い始めることができる（な
にも設定しないとAuth0がとった開発用の
clientが使われる）

client_secretの期限問題がない（と思う）
署名用のキーをそのまま張り付けるだけ
なので、自前でclient_secretを作らなく
てよい。多分期限もちゃんと考えて毎回
or 定期的に作ってくれていると思う

response_typeはcode, modeなし
• 認可リクエスト
• scope=name email
• response_type=code
• reponse_modeなし（当然ですが）
GET /auth/authorize?
client_id={client}&
scope=name%20email&
response_type=code&
redirect_uri=https%3A%2F%2F{tenant}.auth0.com%2Flogin%2Fcallback&
state=LGN0AZlHg1JZapo-4V3AEhFgd0ioBnTk
HOST: appleid.apple.com

当然フロントにはid_tokenもuserもない
• そりゃそうです。
GET /login/callback?
code=c48df4947c13148f4885ee2d4a7aa80f5.0.nsqtx.JJ7XoU5YaYvVjOupQLZcog&
state=gS2mgYI7FL0FKBGVbq-cIz7IZeZc79Tz
HOST: {tenant}.auth0.com

メールアドレスは取れているので、バッ
クエンドでid_tokenを取ってます
• 普通のcode flowです

カスタム・ソーシャル・コネクタを作る
• OAuthエクステンション
• カスタム設定が可能
• あくまでOAuth…

必要な情報を設定～ユーザ属性取得
• access_tokenまではとって来るの
で後は自分でuserInfoをたたく
• Apple Idの場合はUser Profileが取
れるエンドポイントがないので、
やはりid_tokenに頼る
• ctx.id_tokenでコンテキストから
id_tokenが取れるのでdecode
• ctx.userとかできれば嬉しいので
すが、結局userはform_postが前
提なので、無理
client_secret問題再び

注意点

メールアドレス、ユーザ属性は初回のみ
state: hogehoge
code: cb5ce09e14e～～省略～～lbG5qgYO4GJHLMQwg
id_token: eyJraWQ～～省略～～OPO0A6sl-3Lt7LBvHyZg
user:
{"name":{"firstName":"Naohiro","lastName":"Fujie"},"email
":“xxx@xxxx.jp"}
state: hogehoge
code: cb5ce09e14e～～省略～～lbG5qgYO4GJHLMQwg
id_token: eyJraWQ～～省略～～OPO0A6sl-3Lt7LBvHyZg
初回の認可レスポンス 2回目以降の認可レスポンス
{
"exp": 1564639728,
"iat": 1564639128,
"sub":
"002037.b50e1026dfac4f1db61c47b2095a2928.1501",
}
初回のid_token
{
"exp": 1564639728,
"iat": 1564639128,
"sub":
"002037.b50e1026dfac4f1db61c47b2095a2928.1501"
}
2回目以降のid_token

https://appleid.apple.comで認可取消

まとめ
• IDaaSではSDKは使えないので、OpenID Connect？で接続
• ユーザ属性はform_postでid_tokenと一緒に飛んでくるが、実
際イレギュラーすぎてIDaaSでは取得できない（たぶん）
• メールアドレスはid_tokenから
• ユーザ属性もメールアドレスも取れるのは初回認可時だけ
• client_secretのキーローテーションには気を付けること
• Auth0のビルトインは大丈夫っぽい（たぶん）

IDaaSにSign in with Appleをつないでみた

More Related Content

What's hot (20)

Similar to IDaaSにSign in with Appleをつないでみた (11)

More from Naohiro Fujie (20)

IDaaSにSign in with Appleをつないでみた