shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.FormsでGoogle認証を使う

https://www.xamboy.com/2019/11/19/social-media-authentication-google-login-in-xamarin-forms/

[追記] ライブラリ公式のREADMEの方がわかりやすいかも.

github.com

Plugin.GoogleClientをインストールする.

f:id:shuhelohelo:20200602131858p:plain

Firebaseでプロジェクトを作成する

Plugin.GoogleClientのドキュメントに従って作業する.

github.com

Firebase Consoleへ移動する.

console.firebase.google.com

プロジェクトを追加(もしくは作成)する.

f:id:shuhelohelo:20200602132423p:plain

プロジェクトに名前をつけて.

f:id:shuhelohelo:20200602132506p:plain

Google Analyticsは適当にやって,プロジェクト作成完了.

プロジェクトのページへ移動して,「Authentication」を選択する.

f:id:shuhelohelo:20200602132813p:plain

「ログイン方法を設定」ボタンをクリックする.

f:id:shuhelohelo:20200602132849p:plain

Google」を選択する.

「有効にする」をオンにする. f:id:shuhelohelo:20200602133011p:plain

プロジェクトの公開名などを適当につけて,最後に「保存」ボタンを押す.

Googleが有効になりました」

f:id:shuhelohelo:20200602133328p:plain

他にも色々なサービス(Microsoft,Twitter,Githubなどなど)で認証できる.

左上のハンバーガーメニューを開いて,「⚙」マークを押して「プロジェクトを設定」を選択する.

f:id:shuhelohelo:20200602133649p:plain

これからプロジェクトにアプリを追加するので,まずはAndroidを選択する.

f:id:shuhelohelo:20200602133739p:plain

Android パッケージ名」を入力する.

f:id:shuhelohelo:20200602134241p:plain

Androidパケージ名は,Visual StudioAndroidプロジェクトのプロパティを開き,「Android Manifest」タブ内の「Package name」の項目の値.

f:id:shuhelohelo:20200602133950p:plain

デバッグ用の署名証明書」には以下のコマンドを実行して表示されるSHA1の値を貼り付ける.

Windows:

keytool -list -v -keystore "C:\Users\[USERNAME]\AppData\Local\Xamarin\Mono for Android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

「アプリを登録」ボタンを押す.

google-services.json」ファイルをダウンロードしておく.

f:id:shuhelohelo:20200602134339p:plain

ここまでで,Firebase側の作業は完了.

Androidプロジェクト側の作業

指示にあるように,「google-services.json」ファイルをAndroidプロジェクトに追加する.

パーミッションを追加する.

f:id:shuhelohelo:20200602135518p:plain

MainActivity.csのOnCreateメソッド内で,base.OnCreate(savedInstanceState);の下にGoogleClientManager.Initialize(this);を追加する.

            base.OnCreate(savedInstanceState);
            GoogleClientManager.Initialize(this);

同じくMainActivity.csにOnActivityResultをオーバーライドして以下のようにする.

        protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
        {
            base.OnActivityResult(requestCode, resultCode, data);
            GoogleClientManager.OnAuthCompleted(requestCode, resultCode, data);
        }

これでAndroid側は準備完了.

共有コード側

このGoogle認証機能を使うように,ボタンを配置する.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFGoogleAuth.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackLayout>
        <Button Clicked="Button_Clicked" Text="Login with Google" />
    </StackLayout>

</ContentPage>

コードビハインドのイベントハンドラで,ログインメソッドを呼び出す.これは以下の一行でよい.

var loginUser = await CrossGoogleClient.Current.LoginAsync();

このメソッドの呼び出しで,以下のようにGoogleアカウントを選択するダイアログが表示される.

f:id:shuhelohelo:20200602150143p:plain

後は認証後の処理などを付け足して,イベントハンドラ全体としては以下のようになる.

        private async void Button_Clicked(object sender, EventArgs e)
        {
            //ログイン成功した後はAccessTokenに値が入る.
            //それを使って初回のみログインを求めるか,毎回求めるかを選択できる
            //今回は毎回ログインを求めるようにしている
            if (!string.IsNullOrEmpty(CrossGoogleClient.Current.AccessToken))
            {
                //認証済みの場合の処理
                //例えば他のページに遷移するなど.
                //App.Current.MainPage=new MainPage();

                CrossGoogleClient.Current.Logout();
            }

            var loginUser = await CrossGoogleClient.Current.LoginAsync();

            //認証後の処理.
            //例えば,他のページに遷移するなど.
            App.Current.MainPage = new MainPage();
        }

他にもPlugin.FacebookClientがあるようだ.

とても便利なライブラリでした.

ソースコード

github.com