Monaca/CordovaでSign in with Appleを実装する

コロナウイルスの影響もあり、6月末までに延長されていますが、ソーシャルログインを利用しているアプリのSign in with Apple対応が迫られています。ニフクラ mobile backendでもFacebook/Twitter/Google認証を提供しており、それらを使っている方も多いかと思います。

先日ニフクラ mobile backendではSign in with Appleに対応しました。今回はMonaca/Cordovaを使った実装方法について解説します。

プラグインのインストール

Sign in with Appleを利用する際にはCordovaプラグインを使います。Cordovaであれば下記コマンドでインストールできます。

$ cordova plugin add cordova-plugin-sign-in-with-apple

Monacaの場合はCordovaプラグインの管理でcordova-plugin-sign-in-with-appleを指定するか、twogate/cordova-plugin-sign-in-with-appleでZipファイルをダウンロードしてアップロードします。

JavaScript SDKも忘れずにインストールしてください。こちらはCordovaプラグインではありません。MonacaであればJS/CSSの管理からインストールできるものになります。Cordovaの場合はnpmまたはBowerを使います。バージョンは3.1.0以降で対応しています。

実装について

まず最初にNCMBを初期化します。

const applicationKey = '53e...fff';
const clientKey = '3ba...bbf';
const ncmb = new NCMB(applicationKey, clientKey);

また、アプリのIDを定義します。

const clientId = 'com.nifcloud.mbaas.signinwithapple';

Cordovaプラグインを使っていますので、devicereadyイベントの中に記述していきます。通常はログインボタンをクリックしたタイミングなどになるでしょう。

document.addEventListener('deviceready', async () => {
  // この中に書いていきます
});

処理を書きやすくするために、今回は signInWithApple という関数を用意しました。 window.cordova.plugins.SignInWithApple がCordovaプラグインの処理になります。 requestedScopes で指定している [0, 1] というのは 0 が名前、 1 がメールアドレスを取得するという指定になります。必要に応じて指定してください。

function signInWithApple() {
  return new Promise((res, rej) => {
    window.cordova.plugins.SignInWithApple.signin({
      requestedScopes: [0, 1]
    }, res, rej);
  });
}

ではこの関数を使いながら、devicereadyイベントの中を書いていきます。Sign in with Appleの処理自体は、この関数を実行するだけで完了します。

const data = await signInWithApple();

受け取った結果を使ってNCMB用の認証データを作成します。 clientId はiOSアプリのIDです。

const authData = {
  id: data.user,
  access_token: data.authorizationCode,
  client_id: clientId
};

そして会員データを作成します。名前やメールアドレスは初回しか取得できません。それらを指定します。

const user = new ncmb.User();
await user
  .set('email', data.email)
  .set('fullName', data.fullName ? `${data.fullName.givenName} ${data.fullName.familyName}` : '')
  .signUpWith('apple', authData);

会員登録が完了したら、そのデータを使って認証処理を行います。これでSign in with Appleの実装が完了です。

ncmb.User.loginWith(user);
alert('会員認証完了しました');

処理の全体像

スクリプト全体は次のようになります。実装時の参考にしてください。

const applicationKey = '53e...fff';
const clientKey = '3ba...bbf';
const ncmb = new NCMB(applicationKey, clientKey);

const clientId = 'com.nifcloud.mbaas.signinwithapple';
document.addEventListener('deviceready', async () => {
  try {
    const data = await signInWithApple();
    const authData = {
      id: data.user,
      access_token: data.authorizationCode,
      client_id: clientId
    };
    const user = new ncmb.User();
    await user
      .set('email', data.email)
      .set('fullName', data.fullName ? `${data.fullName.givenName} ${data.fullName.familyName}` : '')
      .signUpWith('apple', authData);
    ncmb.User.loginWith(user);
    alert('会員認証完了しました');
  } catch (err) {
    alert(`エラー ${JSON.stringify(err)}`);
  }
}, false);

function signInWithApple() {
  return new Promise((res, rej) => {
    window.cordova.plugins.SignInWithApple.signin({
      requestedScopes: [0, 1]
    }, res, rej);
  });
}

管理画面での設定

Sign in with Appleを使う際には、管理画面で次の情報を設定します。

• Apple ID連携の許可
  許可するに設定
• App ID
  アプリのID
• AppleチームID
  iOS Member Centerで表示されるもの
• AppleキーID
  iOS Member Centerで作成するもの
• 秘密鍵（p8ファイル）
  iOS Member CenterでAppleキーIDを作成時にダウンロードできるもの

まとめ

Monaca/CordovaでのSign in with Appleの実装はプラグインを使うことで、とても簡単に実装できます。FacebookやTwitterなどのソーシャルログインを使っているアプリでは実装時の参考にしてください。

SNS連携 (Swift) : Apple ID連携 | ニフクラ mobile backend

中津川 篤司

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