MonacaSNSAuthenticationApp

【ニフクラ mobile backend 会員管理・認証機能】SNS認証（Facebook, Twitter, Google）& メールアドレス認証を搭載したサンプルアプリ

2020/12/15作成

はじめに

スマートフォンアプリの利用開始時に認証情報を新しく登録する
既存のSNSアカウントを利用してログインができる

ユーザー目線で考えると後者の方が圧倒的にスムーズにアプリの利用開始を行うことができそうです。しかし、SNS認証ってどうやって取り入れたらいいのか？SNSアカウントを保持していないユーザーはどのように対処したらいいのか？など中々ハードルは高そうです。

本サンプルアプリではニフクラ mobile backend の会員管理・認証機能とSNS認証機能を連携させることでSNS認証もメールアドレス認証も同時に実現してしまう方法を提供します。

所要時間目安：＊＊分～＊＊分程度

作成するアプリの概要

ニフクラ mobile backend の「会員管理認証機能」として利用可能な SNS認証機能 （Facebook, Twitter, Google）及び メールアドレス認証機能 の併用を想定したサンプルアプリです。

事前準備

開発環境準備
- Windows でも Mac でもブラウザとして「Google Chrome」のインストールされていれば利用可能です
  - （参考） Mac OS 10.15.6 (Catalina) にて検証済み
- 動作確認端末（Android または iOS）
  - 本サンプルアプリの動作確認には実機へのビルドが必要です
    - iOS端末にビルドする場合は、別途AppleDeveloperProgram への登録(11,800 円/年間)が必要です
  - （参考）検証端末: iPhoneX iOS 13.5.1 にて検証済み
ニフクラ mobile backend アカウント作成＞下記URLよりSNSアカウントにて登録（無料）
- https://mbaas.nifcloud.com/doc/current/
Monaca または Monaca Education アカウント作成＞下記URLより登録（有料）
- Monaca https://monaca.mobi/ja/signup
  - サードパーティ製の Cordova plugin を利用するため、「Pro」プラン以上の契約で利用可能です
- Monaca Education https://monaca.education/ja/signup
  - サードパーティ製の Cordova plugin を利用するため、「Education Gold」プラン以上の契約で利用可能です

サンプルアプリに実装済みの内容

コーディング
- ただし、動作確認には各種SNSとの連携に関する作業及びID等の埋め込みが必要です
使用する以下 Cordova plugin の組み込み
- Facebook: cordova-plugin-facebook4 v6.4.0
- Twitter: ccordova-plugin-twitter-connect-wkwebview v1.0.1
- Google: cordova-plugin-googleplus v8.5.1

※いずれもサードパーティ製の Cordova plugin となります。本サンプルアプリでは上記を利用しておりますが、弊社サービスとは無関係のため、動作保証対象外となります。ご了承ください。

動作確認に必要な作業内容

mobile backend にアプリを作成する（全認証共通作業）
1. アプリの新規作成
2. APIキーの確認
Monaca にプロジェクトを作成する（全認証共通作業）
1. プロジェクトのインポート
2. mobile backend のJavaScript SDK を導入
3. mobile backend のAPIキーを設定
メールアドレス認証の動作確認をする
各種SNS認証を連携する
1. Facebookとの連携と動作手順
2. Twitterとの連携と動作手順
3. Googleとの連携と動作手順
4. Appleとの連携と動作手順
実機にアプリをビルドする（全認証共通作業）
1. iOS端末にビルド
2. Android端末にビルド

※本チュートリアルの手順通り実装しても正しく動作しない場合、「Issues」＞「New issue」より issue を作成（タイトル及び概要の入力）の上、ご報告ください。順次改修いたします。

作業手順

1. mobile backend にアプリを作成する（全認証共通作業）

1.1. アプリの新規作成

mobile backend 管理画面にログインし、アプリを作成します。
- 既にアプリが１つ以上存在する場合は「+新しいアプリ」をクリックします
アプリ名を入力し、「新規作成」をクリックします
- 例）アプリ名「SNSApp」
アプリが作成されるとAPIキーが表示されますが、ここでは「OK」ボタンをクリックして画面を閉じます
アプリの管理画面（ダッシュボード）が表示されます

（参考）クイックスタート：アプリの新規作成 | ニフクラ mobile backend

1.2. APIキーの確認

このあと作成する Monacaプロジェクトに、先ほど mobile backend でアプリ作成時に発行されたAPIキー（アプリケーションキー、クライアントキー）を埋め込むことでフロントエンド（クライアントアプリ）とバックエンド（サーバー）を連携することができます。

管理画面右上の「アプリ設定」＞「基本」＞「APIキー」から確認できます
「コピー」ボタンをクリックして利用します

2. Monaca にプロジェクトを作成する（全認証共通作業）

2.1. プロジェクトのインポート

Monaca または Monaca Education にプロジェクトをインポートします。

Monacaにログインしてダッシュボードを開き、「インポート」をクリックします
「プロジェクトのインポート」＞「インポート方法」＞「URL」をクリックします
下記URLを入力し、「次へ」をクリックします
- https://github.com/natsumo/MonacaSNSAuthenticationApp/archive/main.zip
「プロジェクト名」を入力して「プロジェクトのインポート」をクリックするとプロジェクトが作成されます

2.2. mobile backend のJavaScript SDK を導入

プロジェクトに mobile backend を Monaca から利用するための JavaScript SDK を導入します。

作成したプロジェクトを開き、メニューバーの「設定」＞「JS/CSSコンポーネントの追加と削除」をクリックします
「コンポーネント名」の入力欄に ncmb と入力し「検索」をクリックします
「ncmb」が表示されたら「追加」をクリックします
「バージョン」はそのまま（最新）で「インストール」をクリックします
「components/ncmb/ncmb.min.js」に必ずチェックをしてから「保存」をクリックします
一覧に表示されれば導入完了です

（参考）クイックスタート：SDKのインストールと読み込み | ニフクラ mobile backend

2.3. mobile backend のAPIキーを設定

Monaca プロジェクトに、mobile backend のAPIキーを埋め込み初期化処理を行います。

「js/service.js」ファイルを開きます
以下オブジェクト内 YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY 部分にそれぞれ1.2. APIキーの確認で確認したアプリケーションキー、クライアントキーに書き換えます

const ncmbproperty = {
    application_key : "YOUR_APPLICATION_KEY",
    client_key: "YOUR_CLIENT_KEY"
}

/* 略 */

var ncmb = new NCMB(ncmbproperty.application_key, ncmbproperty.client_key);

2.3. mobile backend のAPIキーを設定で設定した JavaScript SDK、APIキーの設定及び初期化によって Monaca プロジェクトと mobile backend が連携されました。

3. メールアドレス認証の動作確認をする

メールアドレス認証のみ、アプリの実機ビルドなし（プレビュー画面）で動作確認ができます。

ホゲホゲ

4. 各種SNS認証を連携する

各種SNS認証（Facebook, Twitter, Google, Apple）との連携作業を実施し、動作確認をしてみましょう。

5. 実機にアプリをビルドする（全認証共通作業）

動作確認には「デバッグビルド」を行います。

5.1. iOS端末にビルド

AppleDeveloperProgramにログインし、ビルドに必要な証明書類を用意します。

開発用証明書
開発用プロビジョニングプロファイル

（参考）iOS アプリのビルド | Monaca Docs

ビルドに必要な設定をしていきます。

Monaca プロジェクトを開き、メニューバーの「設定」＞「iOSアプリ設定」をクリックします
「アプリケーション名」と「App ID」を入力します
- App ID は プロビジョニングプロファイル 作成時に使用した App ID の Bundle ID と同じものを設定します
「対象デバイス」にチェックを入れ「保存」をクリックします