NCMBではソーシャル認証を提供しています。対応しているのはTwitter/Facebook/Google/Appleとなっています。しかし、この手のOAuth2認証では、何らかのサーバサイドがなければいけません（Facebook除く）。mBaaSでも、そうしたサーバの用意が必須になっています。
今回は少しでも簡略化するために、OAuth2認証プロキシサーバであるPizzlyを使って認証を簡略化してみました。
Pizzlyとは
Pizzlyはいわば認証プロキシサーバになります。対応しているプロバイダーの情報を登録するだけで、認証後のデータを送信してくれます。Pizzlyでは本来、Pizzlyを経由してサービスを使い続ける前提になっています。そのため、OAuth2サーバから送られてきた情報をすべて利用できる訳ではありません。
今回試してみた限りでは、次の認証について利用が可能でした。
ではその利用法を解説します。
Pizzlyのインストールについて
Pizzlyはまず自分でサーバを立てます。HerokuやPlatform.shに対応していますので、無料で利用できます。サーバを立てたら、そのURLにアクセスします。
管理画面では、対応しているOAuth2プロバイダーの設定をします。
基本的に (サーバのドメイン)/callback というURLでコールバックURLを設定するだけです。指示されている通りに設定することで、認証を利用する準備が整います。
GoogleはGoogle一つではなく、カレンダーやコンタクトなどに分かれています。今回はコンタクトを利用しています。なお、FacebookやGoogleで認証用のクライアントキー、シークレットキーを取得するのを忘れないでください。
管理画面での設定
mBaaSの管理画面では、ソーシャル認証の有効化と、それぞれのキー設定を行います。
クライアント側での設定
npmやbowerなどを使ってPizzlyのJavaScriptライブラリを読み込みます。
npm install pizzly-js
次にJavaScriptでPizzlyを読み込みます。そして認証処理を行うOAuth2プロバイダーごとにインスタンスを作成しておきます。
const host = 'https://xxxxxxx.herokuapp.com/'; const pizzly = new Pizzly({ host }); const Facebook = pizzly.integration('facebook') const Google = pizzly.integration('google-contacts')
OAuth2認証を行うプロバイダを区別することなく、次のように認証処理は実行できます。providerにはfacebookやgoogle-contactsといった文字が入ります。
async function connect(provider) { const { authId } = await pizzly.integration(provider).connect(); const res = await fetch(`${host}api/${provider}/authentications/${authId}`); const auth = await res.json(); return { auth: auth.payload, authId }; }
Facebook認証の場合
Facebook認証の場合、まずこのconnectを呼び出します。
const { auth, authId } = await connect('facebook');
次にFacebookの自分のIDを取得するためにPizzlyのFacebookインスタンスを呼び出します。
const response = await Facebook.auth(authId).get('/me');
const { id } = await response.json();
さらにmBaaSでの認証用に有効期限などを作成して、認証処理を実行します。
const d = new Date(auth.expiresIn * 1000 + (new Date()).getTime()).toISOString();
const expiration_date = {__type: "Date", iso: d };
const authData = {
id,
access_token: auth.accessToken,
expiration_date
};
const user = await signUp('facebook', authData);
signUp関数は共通化しているだけで、mBaaSの認証処理を行っているだけに過ぎません。
async function signUp(provider, authData) {
const user = new ncmb.User();
await user.signUpWith(provider, authData);
return user;
}
Google認証について
Google認証の場合もほぼ同様です。プロキシ側にアクセスする必要もないので、もっと簡単になります。
const { auth } = await connect('google-contacts');
const authData = {
id: auth.idTokenJwt.sub,
access_token: auth.accessToken
};
const user = await signUp('google', authData);
まとめ
Pizzlyを使うことで、OAuth2を使ったソーシャル認証が簡単に実装できるようになります。Appleに対応していないのが問題ではありますが、将来的には対応するものと期待しましょう。
