FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Pizzlyを使って認証を統合する

f:id:mbaasdevrel:20201014164500p:plain

NCMBではソーシャル認証を提供しています。対応しているのはTwitter/Facebook/Google/Appleとなっています。しかし、この手のOAuth2認証では、何らかのサーバサイドがなければいけません(Facebook除く)。mBaaSでも、そうしたサーバの用意が必須になっています。

今回は少しでも簡略化するために、OAuth2認証プロキシサーバであるPizzlyを使って認証を簡略化してみました。

Pizzlyとは

Pizzlyはいわば認証プロキシサーバになります。対応しているプロバイダーの情報を登録するだけで、認証後のデータを送信してくれます。Pizzlyでは本来、Pizzlyを経由してサービスを使い続ける前提になっています。そのため、OAuth2サーバから送られてきた情報をすべて利用できる訳ではありません。

今回試してみた限りでは、次の認証について利用が可能でした。

  • Facebook
  • Google

ではその利用法を解説します。

Pizzlyのインストールについて

Pizzlyはまず自分でサーバを立てます。HerokuやPlatform.shに対応していますので、無料で利用できます。サーバを立てたら、そのURLにアクセスします。

f:id:mbaasdevrel:20201014164524p:plain

管理画面では、対応しているOAuth2プロバイダーの設定をします。

f:id:mbaasdevrel:20201014164536p:plain

基本的に (サーバのドメイン)/callback というURLでコールバックURLを設定するだけです。指示されている通りに設定することで、認証を利用する準備が整います。

f:id:mbaasdevrel:20201014164625p:plain

GoogleはGoogle一つではなく、カレンダーやコンタクトなどに分かれています。今回はコンタクトを利用しています。なお、FacebookやGoogleで認証用のクライアントキー、シークレットキーを取得するのを忘れないでください。

f:id:mbaasdevrel:20201014164638p:plain

管理画面での設定

mBaaSの管理画面では、ソーシャル認証の有効化と、それぞれのキー設定を行います。

f:id:mbaasdevrel:20201014164716p:plain

クライアント側での設定

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に対応していないのが問題ではありますが、将来的には対応するものと期待しましょう。

Pizzly

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。