ユーザー認証は、ほぼすべてのエンタープライズモバイルアプリの基本的な要件です。給与計算、休暇、ビジネス旅行の予約に関連する内部モバイルアプリの場合、組織は、オンプレミスLDAPサーバーに対してユーザーを認証することにより、シングルサインオンを活用したいと考えています。また、エンタープライズデータが公開されていないエンドユーザーをターゲットにしたアプリの場合、サービスリクエストを提起できる製品ユーザー向けのアプリであり、Facebookログイン/Googleログインなどのソーシャルログインを使用してユーザーが認証できるようになります。このコードパターンは、開発者がIBM Mobile Foundationサービスを活用して次のユーザー認証メカニズムを実装する方法を示しています。
このコードパターンを完了したら、次のように理解できます。

上の図は、ログインフローを示しています(ここではGoogleで説明されていますが、Facebookや他のソーシャルプロバイダーにも関連しています)。この図は、ソーシャルプロバイダーを呼び出すためのトリガーがクライアントによって開始されることを示しています。

1。イオンおよびモバイルファウンデーションCLIのセットアップ
2。Cloudantデータベースを作成し、サンプルデータを入力します
3.IBMクラウドオブジェクトストレージサービスを作成し、サンプルデータを入力します
4.モバイルファンデーションサービスを作成し、MFP CLIを構成します
5。LDAPサーバーとセキュアのゲートウェイクライアントをセットアップします
6.ソーシャルログインのためにGoogleおよびFacebookにAndroidアプリを登録
7.ソースリポジトリをダウンロードしてカスタマイズします
7.1クローンリポジトリ
7.2アプリID、名前、説明を更新します
7.3 MobileFoundation AdapterでCloudant資格情報を指定します
7.4 MobileFoundationアダプターでクラウドオブジェクトストレージ資格情報を指定します
7.5 MobileFoundationアダプターでLDAP資格情報を指定します
7.6 MoilefoundationアダプターでGoogleサインイン資格情報を指定します
7.7 IonicアプリでFacebook AppIDとGoogle ClientIDを指定します
8。モバイルファウンデーションアダプターとテストを展開します
8.1 MobileFoundationアダプターを構築および展開します
8.2 MobileFoundationダッシュボードを起動し、アダプターの構成を確認します
9.Android電話でアプリケーションを実行します
このプロジェクトは、https://github.com/ibm/ionic-mfp-appの上に構築されています。そのベースプロジェクトから次の手順を実行して、IBMクラウドから必要なモバイルバックエンドサービスをプロビジョニングし、サンプルデータに入力し、開発マシンにイオンおよびモバイルファウンディングCLIをセットアップします。
ステップ1。イオンおよびモバイルファウンデーションCLIのセットアップ
ステップ2。Cloudantデータベースを作成し、サンプルデータを入力します
ステップ3。IBMクラウドオブジェクトストレージサービスを作成し、サンプルデータを入力します
ステップ4。モバイルファンデーションサービスを作成し、MobileFoundationCLIを構成する
Enterprise LDAPサーバーのセットアップと実行がある場合は、このセクションの残りの部分をスキップして、「Secure Gatewayクライアントのセットアップ」セクションに移動できます。 LDAPサーバーのセットアップがない場合は、https://directory.apache.org/apachedsをインストールしてみてください。 Apacheds用の基本的なインストールおよびセットアップガイドは、https://directory.apache.org/apacheds/basic-user-guide.htmlで入手できます(セクション1を参照してください)。ここでは、こちらのサンプルデータをここでインポートします。たとえば、詳細とともに新しいエントリを追加してください。
IBMクラウドで実行されているモバイルファンデーションサーバー内からオンプレミスLDAPサーバーにアクセスできるようにするには、最初に、次の手順に従って、オンプレミスLDAPサーバーとIBMクラウドの間に安全なゲートウェイ接続を作成する必要があります。
IBMクラウドにログオンします。クリックしてください
Catalog > All Categories > Integration > Secure Gateway > Create
セキュアゲートウェイサービスダッシュボード内で、 Add Gatewayクリックします。名前を指定し、 Add Gatewayをクリックします。追加したゲートウェイのアイコンをクリックします。
Add Clientsクリックします。 IBM Installerのデフォルトの選択をAs-ISのままにしておきます。 Gateway IDとSecurity Tokenをメモします。
LDAPサーバーが実行されているOSのSecure GatewayクライアントインストーラーのダウンロードURLをコピーします。
LDAPサーバーが実行されているオンプレミスマシンにログオンします。 Secure Gatewayダッシュボードから取得したダウンロードURLを使用して、Secure Gatewayクライアントインストーラーをダウンロードします。ここで利用できる手順を使用して、セキュアゲートウェイクライアントをインストールして起動します。
ここで利用可能な手順を使用して、安全なゲートウェイクライアントの宛先としてLDAPサーバーを追加します。新しく追加された目的地にAccess blocked by ACL付いた赤い色の隆起した手を示している場合は、安全なゲートウェイクライアントコマンドラインでacl allow < host >:< port >実行することを確認してください。
hostname:port of LDAP ServerとしてMobileFirst Adapterで指定するものです。 

$ git clone https://github.com/IBM/MFP-Auth-LDAP
$ cd MFP-Auth-LDAP
以下のようにIonicMobileApp/config.xmlを更新します。 id 、 name 、 description 、およびauthor詳細を適切に変更します。
<?xml version='1.0' encoding='utf-8'?>
<widget id="org.mycity.myward" version="2.0.0" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
<name>MyWard</name>
<description>Get your civic issues resolved by posting through this app.</description>
<author email="[email protected]" href="https://developer.ibm.com/code/author/shivahr/">Shiva Kumar H R</author>
...
MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xmlを開き、次のプロパティを更新して、ステップ2で作成されたCloudantデータベースを指すようにします。
keyとpasswordを更新します。accountの場合、ステップ2.2のスナップショットに示すように、Cloudant Dashboard URL部分を-bluemix.cloudant.comまで指定します。DBNameの場合、 mywardのデフォルト値をAs-isのままにしておきます。
<mfp:adapter name="MyWardData" ...>
<property name="account" displayName="Cloudant account" defaultValue=""/>
<property name="key" displayName="Cloudant key" defaultValue=""/>
<property name="password" displayName="Cloudant password" defaultValue=""/>
<property name="DBName" displayName="Cloudant DB name" defaultValue="myward"/>
...
</mfp:adapter>
MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xmlを開き、次のプロパティを更新して、ステップ3で作成されたクラウドオブジェクトストレージを指すようにします。
bucketNameの値を指定します。serviceIdとapiKeyを指定します。endpointURLを更新します。
<mfp:adapter name="MyWardData" ...>
...
<property name="endpointURL" displayName="Cloud Object Storage Endpoint Public URL" defaultValue="https://s3-api.us-geo.objectstorage.softlayer.net"/>
<property name="bucketName" displayName="Cloud Object Storage Bucket Name" defaultValue=""/>
<property name="serviceId" displayName="Cloud Object Storage Service ID" defaultValue="" />
<property name="apiKey" displayName="Cloud Object Storage API Key" defaultValue=""/>
</mfp:adapter>
Open MobileFoundationAdapters/LDAPLoginAdapter/src/main/adapter-resources/adapter.xml更新し、ステップ5.2で作成されたセキュアゲートウェイクライアントを指すように次のプロパティを更新します
<property name="ldapUserAttribute" defaultValue="uid" displayName="The LDAP attribute for username"/>
<property name="ldapNameAttribute" defaultValue="cn" displayName="The LDAP attribute for display name"/>
<property name="ldapURL" defaultValue="ldap://caplonsgprd-5.integration.ibmcloud.com:15315" displayName="The LDAP Server URL"/>
<property name="userFilter" defaultValue="(&(uid=%v))" displayName="The LDAP user filter, use %v as placeholder for user"/>
<property name="bindDN" defaultValue="uid=admin,ou=system" displayName="The LDAP bind DN (- for none)"/>
<property name="bindPassword" defaultValue="apacheds" displayName="The LDAP bind password (- for none)" type="string"/>
Open MobileFoundationAdapters/SocialLoginAdapter/src/main/adapter-resources/adapter.xml更新し、以下に示すようにステップ6で作成したGoogleクライアント-IDを更新します
<property name="google.clientId"
defaultValue="618106571370-nie902ccc0i3id6sgdu4nc58bslabcde.apps.googleusercontent.com"
displayName="google client Id"
description="OAuth 2.0 client ID that was created for your server. Get it from Google Developers Console
at https://console.developers.google.com/projectselector/apis/credentials"/>
次のコマンドを使用して、CordovaおよびIonic FacebookプラグインとGooglePlusプラグインをインストールします(Python2は前提条件です)
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="your_appid_from_step6" --variable APP_NAME="your application name"
$ npm install --save @ionic-native/facebook
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID="reverseclientid_from_step6"
$ npm install --save @ionic-native/google-plus
FacebookとGooglePlusプラグインがインストールされたら、以下に示すように、ステップ6で取得したFacebookアプリIDとGoogle WebClientIDがconfig.xmlファイルに存在するかどうかを確認します
<plugin name="cordova-plugin-facebook4" spec="^1.9.1">
<variable name="APP_ID" value="your_appid" />
<variable name="APP_NAME" value="MyWard" />
</plugin>
<plugin name="cordova-plugin-googleplus" spec="^5.3.0">
<variable name="REVERSED_CLIENT_ID" value="your_reverse_clientid" />
</plugin>
REVERSED_CLIENT_ID 、ステップ6で取得したGoogle WebClientIDの逆の形式です。
また、GooglePlusLogin()メソッドのauth_handler.tsファイルにWebClientIDを追加します。
以下のようにMyWardDataアダプターを構築および展開します。
$ cd MobileFoundationAdapters/
$ cd MyWardData
$ mfpdev adapter build
$ mfpdev adapter deploy
注 - サーバーがデフォルトのものではない場合は、コマンドにサーバー名「MFPDEVアダプター展開コマンド」に言及してください。
以下のように、 LDAPLoginAdapterアダプターをビルドして展開します。
$ cd ../LDAPLoginAdapter/
$ mfpdev adapter build
$ mfpdev adapter deploy
以下のように、 SocialLoginAdapterアダプターを構築および展開します。
$ cd ../SocialLoginAdapter/
$ mfpdev adapter build
$ mfpdev adapter deploy
以下のようにMobileFoundationダッシュボードを起動します。
Cloud Foundry Servicesの下で、ステップ4で作成したMobile Foundationサービスをクリックします。表示されるサービスの概要ページには、MobileFoundation Dashboardが埋め込まれています。また、ステップ4に記載されているURLに/mfpconsoleを追加して、モバイルファウンドダッシュボードを別のブラウザタブで開くこともできます。LDAPLoginAdapter 、 SocialLoginAdapter 、 MyWardDataアダプターがリストされています。以下のようにモバイルファウンデーションアダプターの構成を確認します。
MyWardDataアダプターをクリックします。 Configurationsタブで、以下に示すように、Cloudantデータベースとクラウドオブジェクトストレージにアクセスするために、ステップ7.3およびステップ7.4で指定したさまざまなプロパティが表示されます。以前に示すように、 MobileFoundationAdapters/MyWardData/src/main/adapter-resources/adapter.xmlでこれらのプロパティ値を指定する代わりに、空のdefaultValueでアダプターを展開し、アダプターが展開されると、このページの値を変更できます。 
Resourcesタブをクリックします。以下に示すように、 MyWardDataアダプターによって露出しているさまざまなREST APIが表示されます。 Security列には、各RESTメソッドに対するProtecting Scope UserLogin表示する必要があります。 


Base Projectのステップ7の指示に従って、Android電話でアプリケーションを実行します。プレーンユーザーLoginの代わりに、GoogleサインインボタンまたはFBサインインボタンまたはLDAPLOGINボタンをテストします。選択したボタンに拠点を置いて、ユーザー認証検証メカニズムは異なります。

以下のスクリーンショットは、アプリケーションのさまざまなページを示しています。



Chrome開発者ツールを使用してAndroidハイブリッドアプリをデバッグするための手順をご覧ください。または、一般的に発生する問題のソリューションについては、トラブルシューティングガイドをご覧ください。
Apache 2.0