概要

この記事の記載内容

Xamarin.Forms + Azure Mobile Appsで認証処理を行う
公式ドキュメントだと代替案が大量にあり大混乱したので、余計な代替案は出さず、最低限の説明のみ記載し、認証処理を実現できることを目指す
対象OSはAndroid、iOS
1章は主にAzureの設定
2章はAzure Web Apps、Xamarinのプログラム修正方法

実現したい処理内容

複数プロバイダ（Office365, Google）でXamarin.Forms + Azure Mobile Appsの認証処理を行う
アプリ起動時、過去にサインインを行っていれば、サインイン画面を再度表示せずに認証後の画面に遷移する
アクセストークンは定期的に更新する

その他・要調査項目

Azure Mobile Appsにはサーバー側認証する。クライアント側認証との違いは難しいので良くわかってない
GoogleのRefreshトークンの取得が出来ない
サインアウト時、アプリからキャッシュ消すだけじゃなくて、ブラウザからもサインアウトしたいけど、やり方わからない

今回解説用に作成するアプリの名称

アプリ名：XamarinAuthFirst
Azure Mobile Apps名：xamarin-auth-1st
Azure Mobile Apps URL： https://xamarin-auth-1st.azurewebsites.net
リダイレクト用URLスキーマ： xamarin-auth-1st://easyauth.callback

Azure設定

Azure Mobile Apps登録(1)

Azureポータルの「＋新規」を押下し、「Mobile Apps」で検索します。

すると「モバイルアプリ」が表示されるので、選択します。

そして「アプリ名」に、URLとなる「xamarin-auth-1st」を入力し、作成します。

Office365サインイン設定 - Azure AD Application登録

Azureポータルの「Azure Active Directory」を押下し、「アプリの登録」を押下します。
その後、「＋新しいアプリケーションを登録」を押下します。

アプリの名前、サインオンURLを入力します。
アプリケーションの種類は、「Webアプリ/API」を選択してください。

新しいアプリが作成されます。
「アプリケーションID」文字列はコピーしてください。あとで使用します。

アプリの設定を変えていきます。
「プロパティ」で、「マルチテナント」を「はい」に変更してください。
その後「保存」を押下します。

「応答URL」を選択し、URLの末尾に「/.auth/login/aad/callback」を追加します。
その後「保存」を押下します。

「キー」を選択し、任意の「キーの説明」を入力、期間を設定し（自分は「期限なし」を選択します）、「保存」を押下します。
「値」の欄に、ClientSecretが発行されるので、必ずコピーします。あとで使用するのと、これ以降この文字列はコピーできないので、この段階で必ずコピーしてください。

これでAzure AD Applicationの設定は終了です。

Googleサインイン設定 - Google OAuth登録

次はGoogleです。以下のサイトにアクセスしてください。
https://console.developers.google.com/

メニューから「認証情報」を選択し、「認証情報を作成」を押下します。
その後、「OAuth クライアントID」を押下します。

アプリケーションの種類を「ウェブアプリケーション」、
名前は任意の名前（アプリ名）
承認済みのJavascript生成元を、Azure Mobile AppsのURL、
承認済みのリダイレクトURIを、Azure Mobile AppsのURL + 「/.auth/login/google/callback」を入力します。
完了したら、「作成」を押下します。

クライアントID、クライアントシークレットが表示されるので、コピーします。

これでGoogle APIsの設定は終了です。

Azure Mobile Apps登録(2)

先ほどコピーした、Azure AD Application、 Google APIsのIDなどを、Azure Mobile Appsに登録します。

Azure Mobile Appsの設定に戻り、「認証/承認」を押下します。
その後、「Apps Service 認証」を「オン」にします。
認証プロバイダーの情報が表示されるので、「Azure Active Directory」を押下します。

管理モードを「詳細」にします。
クライアントID、クライアントシークレットに、先ほどAzure AD ApplicationでコピーしたクライアントID・Secretを記入します。「発行者のURL」は空欄にしてください。
その後、「OK」を押下します。

Googleでも同様の手順を行います。
認証プロバイダーで「Google」を押下し、クライアントID・シークレットを、Google APIsで記入したID・シークレットをコピーします。
その後、OKを押下します。

ページ下の「許可される外部リダイレクト URL」に、スキーマ名 + 「://easyauth.callback」と入力します。スキーマ名はアプリ名なんかでいいと思います。
スキーマ名は、Android + iOS側で「URLからアプリに戻る」ための判別を行うためのもののようです。
今回は「xamarin-auth-1st://easyauth.callback」にします。
最後、「保存」を押下します。

Azure Mobile Apps登録(3)

Xamarinソリューション、ならびにDB設定などの準備を行います。
今回は「クイックスタート」を利用します。

メニューより「クイックスタート」を押下します。
その後、「Xamarin.Forms」を押下します。

「データベースの接続」を押下し、「＋追加」を押下します。

必要なDBの情報を一通り設定します。必要に応じてSQL Databaseは作成してください。

テーブルAPIの言語を選択します。
個人的にはC#をおすすめします。
C#を選択した場合、「ダウンロード」ボタンが表示されますので、押下します。
Azure Mobile Apps本体のソリューションがダウンロードされます。あとで使用します。

「クライアントアプリケーションの構成」で、「新しいアプリケーションアプリの作成」を押下し、「ダウンロード」を押下します。
Xamarin.Formsソリューションがダウンロードされます。あとで使用します。

これで、Azureの設定はすべて終了です。

次回予告

次回は、ダウンロードしたAzure Mobile Appsソリューション、Xamarin.Formsソリューションに、認証処理を加えていきます。
https://qiita.com/hirossyi73/items/f3e56633a4f24eb27a60

参考文献

https://docs.microsoft.com/ja-jp/azure/app-service-mobile/app-service-mobile-xamarin-forms-get-started-users
https://docs.microsoft.com/ja-jp/azure/app-service/app-service-mobile-how-to-configure-active-directory-authentication
https://docs.microsoft.com/ja-jp/azure/app-service/app-service-mobile-how-to-configure-google-authentication

（宣伝1）Vietnam Japan Cloud Developer 2017 開催！

https://connpass.com/event/67792/
Xamarin.FormsやAzure Mobile Appsをはじめとした、クラウドサービスのセミナーをハノイで開催します！
日程：2017/11/17(Fri) 16:00-20:00
自分も少し話します。英語か日本語かは要検討。
内容はYouTubeにも公開します。ハノイには来れない、という方もぜひYouTubeにてお越し下さい！

（宣伝2）Xamarin.Forms + Azure Mobile AppsのOSSプロジェクト開発中

現在、Xamarin.Forms + Azure Mobile AppsのOSSアプリを走らせています。
日々の日報などをSPのみで完結出来るアプリです。
GitHubで公開しておりますので、よければぜひご覧ください！
https://github.com/exceedone/APO-Chan