Xamarin.Forms + Azure Mobile Apps 認証処理 Getting Started (1/2)

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

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

## その他・要調査項目
- 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)

![capture1.png](https://qiita-image-store.s3.amazonaws.com/0/204834/61267c2f-6580-c99a-8b32-8985395bc8ce.png)
Azureポータルの「＋新規」を押下し、「Mobile Apps」で検索します。

![capture2.png](https://qiita-image-store.s3.amazonaws.com/0/204834/065dbe4c-e6b9-a4ca-175f-3e7e02430f6c.png)
すると「モバイル アプリ」が表示されるので、選択します。

![capture3.png](https://qiita-image-store.s3.amazonaws.com/0/204834/c6299325-e389-e432-3945-dc728ed25480.png)
そして「アプリ名」に、URLとなる「xamarin-auth-1st」を入力し、作成します。

## Office365サインイン設定 - Azure AD Application登録
![capture4.png](https://qiita-image-store.s3.amazonaws.com/0/204834/2d06f71d-1ef6-d032-ffe9-c5bdf29ed93a.png)
Azureポータルの「Azure Active Directory」を押下し、「アプリの登録」を押下します。
その後、「＋新しいアプリケーションを登録」を押下します。

![capture5.png](https://qiita-image-store.s3.amazonaws.com/0/204834/33bd5ab3-b7f8-3615-71c2-907120757b6b.png)
アプリの名前、サインオンURLを入力します。
アプリケーションの種類は、「Webアプリ/API」を選択してください。

![capture7.png](https://qiita-image-store.s3.amazonaws.com/0/204834/6e9d7930-24da-188e-a642-f544efa8b6f9.png)
新しいアプリが作成されます。
「アプリケーションID」文字列はコピーしてください。あとで使用します。

![capture6.png](https://qiita-image-store.s3.amazonaws.com/0/204834/94e08322-ea11-8c94-7b9f-2f01b73881b9.png)
アプリの設定を変えていきます。
「プロパティ」で、「マルチテナント」を「はい」に変更してください。
その後「保存」を押下します。

![capture8.png](https://qiita-image-store.s3.amazonaws.com/0/204834/98949995-9f52-e3f4-d96c-1e60c6fdb6a6.png)
「応答URL」を選択し、URLの末尾に「/.auth/login/aad/callback」を追加します。
その後「保存」を押下します。

![capture9.png](https://qiita-image-store.s3.amazonaws.com/0/204834/7fe27048-1593-ea23-69e3-8d37d55b2b66.png)
「キー」を選択し、任意の「キーの説明」を入力、期間を設定し（自分は「期限なし」を選択します）、「保存」を押下します。
「値」の欄に、ClientSecretが発行されるので、必ずコピーします。あとで使用するのと、これ以降この文字列はコピーできないので、この段階で必ずコピーしてください。

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

## Googleサインイン設定 - Google OAuth登録
次はGoogleです。以下のサイトにアクセスしてください。
https://console.developers.google.com/

![c10.png](https://qiita-image-store.s3.amazonaws.com/0/204834/8bd8f9a2-edf0-d802-faae-52d0817b6176.png)
メニューから「認証情報」を選択し、「認証情報を作成」を押下します。
その後、「OAuth クライアントID」を押下します。

![c11.png](https://qiita-image-store.s3.amazonaws.com/0/204834/19a0d3e7-b334-1f31-03fa-339c3616eb25.png)
アプリケーションの種類を「ウェブ アプリケーション」、
名前は任意の名前（アプリ名）
承認済みのJavascript生成元を、Azure Mobile AppsのURL、
承認済みのリダイレクトURIを、Azure Mobile AppsのURL + 「/.auth/login/google/callback」を入力します。
完了したら、「作成」を押下します。

![c12.png](https://qiita-image-store.s3.amazonaws.com/0/204834/7372b1d9-b821-7f74-ef8d-87c14a731fa4.png)
クライアントID、クライアントシークレットが表示されるので、コピーします。

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

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

![c13.png](https://qiita-image-store.s3.amazonaws.com/0/204834/f41ae443-bb09-4497-b16a-69612f7173ff.png)
Azure Mobile Appsの設定に戻り、「認証/承認」を押下します。
その後、「Apps Service 認証」を「オン」にします。
認証プロバイダーの情報が表示されるので、「Azure Active Directory」を押下します。

![c14.png](https://qiita-image-store.s3.amazonaws.com/0/204834/a720d96d-33ee-66cb-611f-ee190b480db8.png)
管理モードを「詳細」にします。
クライアントID、クライアントシークレットに、先ほどAzure AD ApplicationでコピーしたクライアントID・Secretを記入します。「発行者のURL」は空欄にしてください。
その後、「OK」を押下します。

![c15.png](https://qiita-image-store.s3.amazonaws.com/0/204834/87b697d7-d9df-7de2-4680-9c3ca7785774.png)
Googleでも同様の手順を行います。
認証プロバイダーで「Google」を押下し、クライアントID・シークレットを、Google APIsで記入したID・シークレットをコピーします。
その後、OKを押下します。

![c16.png](https://qiita-image-store.s3.amazonaws.com/0/204834/1bf4c6f5-d2ca-ea44-4548-cc1807777ba2.png)
ページ下の「許可される外部リダイレクト URL」に、スキーマ名 + 「://easyauth.callback」と入力します。スキーマ名はアプリ名なんかでいいと思います。
スキーマ名は、Android + iOS側で「URLからアプリに戻る」ための判別を行うためのもののようです。
今回は「xamarin-auth-1st://easyauth.callback」にします。
最後、「保存」を押下します。

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

![c17.png](https://qiita-image-store.s3.amazonaws.com/0/204834/cafb49fc-66d1-ab4f-d885-0797c75ee948.png)
メニューより「クイックスタート」を押下します。
その後、「Xamarin.Forms」を押下します。

![c18.png](https://qiita-image-store.s3.amazonaws.com/0/204834/9acbcfe6-8999-c009-e39a-a40f24637e47.png)
「データベースの接続」を押下し、「＋追加」を押下します。

![c19.png](https://qiita-image-store.s3.amazonaws.com/0/204834/7f057f16-172b-d678-9e80-0e4960aac3e1.png)
必要なDBの情報を一通り設定します。必要に応じてSQL Databaseは作成してください。

![c20.png](https://qiita-image-store.s3.amazonaws.com/0/204834/50289d2c-1d8e-cb95-8759-d732166e7abc.png)
テーブルAPIの言語を選択します。
個人的にはC#をおすすめします。
C#を選択した場合、「ダウンロード」ボタンが表示されますので、押下します。
Azure Mobile Apps本体のソリューションがダウンロードされます。あとで使用します。

![c21.png](https://qiita-image-store.s3.amazonaws.com/0/204834/467f90a1-7e62-8a74-98fc-c6120200214c.png)
「クライアント アプリケーションの構成」で、「新しいアプリケーションアプリの作成」を押下し、「ダウンロード」を押下します。
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 開催！
![c22.png](https://qiita-image-store.s3.amazonaws.com/0/204834/56188a7c-5c40-e30e-e255-42374ff78563.png)
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