fc2ブログ

記事一覧

Facebook Graph API v2の使用方法 -ログイン・アクセストークン取得・プロフィール情報取得- | Xamarin.Forms


今回はFacebook Graph API v2を使用してログインし、アクセストークンを取得してその登録情報を取得する方法についてご紹介いたします。
尚、Facebook for Developersの登録は以前の記事「Facebookで自分のアプリを友達に招待する方法 -App Invite-」にて済ませてありますが、当記事の前提条件となりますので、念のためご確認いただくと良いでしょう。


iOS11
xamarin_facebook_login_03.png
Android7.0
xamarin_facebook_login_02.png



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.7.9.45 (NuGet Xamarin.Forms 2.4.0.282)
・macOS Sierra 10.12.6 / Xcode 9 / Xamarin.iOS 11.0.0.0
Facebook for Developersの登録



1.登録

Facebook for Developersに追加の登録を行います。
(1)ホーム>アプリ>"アプリ名"のダッシュボードを開きます。
(2)左メニューの「製品を追加」から「Facebookログイン」を追加します。
(3)Facebookログイン>設定 を開き、有効なOAuthリダイレクトURIに以下のURLを入力し、設定を保存します。
  http://www.facebook.com/connect/login_success.html

xamarin_facebook_login_01.png



2.基本的なURL

直接ブラウザで確認ができるURLです。

(1)ログイン画面(アクセストークン取得)
http://www.facebook.com/v2.9/dialog/oauth?client_id={app_id}&display=popup&response_type=token&redirect_uri=http%3A%2F%2Fwww.facebook.com%2Fconnect%2Flogin_success.html&scope=email%2Cuser_friends%2Cuser_birthday%2Cread_custom_friendlists

※パーミッションについて
・"%2C"は結合文字列(カンマをURLエンコード)です。
・user_birthday, read_custom_friendlistsは使用するにはFacebookへ申請が必要です。

(2)プロフィール情報の取得
https://graph.facebook.com/me?fields=id,name,first_name,last_name,email,gender,birthday,age_range,picture,cover,devices,is_verified&access_token={access_token}



3.実装方法

上記URLをXamarin.Formsで呼び出す方法で実装します。PCLに記述しますので、AndroidとiOSで共通です。ログイン画面はWebViewで表示し、取得したアクセストークンを引数にHttpClientで接続しプロフィール情報を取得します。
PCLの任意のページに記述します。

FacebookTestPage.xaml.cs
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AppName.Views
{
    public partial class FacebookTestPage : ContentPage
    {
        public FacebookTestPage()
        {
            InitializeComponent();
        }

private const string AppId = "999999999999999";
private const string FacebookLoginUrl = "http://www.facebook.com/connect/login_success.html";

        /// <summary>
        /// Facebookログイン画面を表示する
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        async void OnLoginClick(object sender, EventArgs e)
        {
            try
            { 
//パーミッションの結合文字列(カンマをURLエンコード)
const string and = "%2C";

//ログインURL(アクセストークン要求)
var apiRequest =
"http://www.facebook.com/v2.9/dialog/oauth" +
"?client_id=" + AppId +
"&display=popup" +
"&response_type=token" +
"&redirect_uri=" + System.Net.WebUtility.UrlEncode(FacebookLoginUrl) +
//パーミッション
"&scope=email" + and + //デフォルトで使用が許可されている
"user_friends" + and + //デフォルトで使用が許可されている
"user_birthday" //使用にはFacebookに申請が必要
;

                var webView = new WebView
                {
                    Source = apiRequest,
                    HeightRequest = 1
                };

                webView.Navigated += OnWebViewNavigated;
                Content = webView;
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message + System.Environment.NewLine + ex.StackTrace);
            }
        }

/// <summary>
/// WebViewの遷移イベント
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
        private async void OnWebViewNavigated(object sender, WebNavigatedEventArgs e)
        {
            var accessToken = ExtractAccessTokenFromUrl(e.Url);
            if (!String.IsNullOrEmpty(accessToken))
            {
                await GetFacebookProfileAsync(accessToken);
            }
        }

/// <summary>
/// Url文字列からアクセストークンを取得する
/// </summary>
/// <param name="url">URL文字列</param>
/// <returns></returns>
        private string ExtractAccessTokenFromUrl(string url)
        {
            if (url.Contains("access_token") && url.Contains("&expires_in="))
            {
                var at = url.Replace(FacebookLoginUrl + "#access_token=", "");

                var token = at.Remove(at.IndexOf("&expires_in="));
                return token;
            }

            return String.Empty;
        }

/// <summary>
/// Facebookプロフィール情報を取得する
/// </summary>
/// <param name="accessToken">アクセストークン</param>
/// <returns></returns>
        private async Task GetFacebookProfileAsync(string accessToken)
        {
            var requestUrl =
                "https://graph.facebook.com/me?" +
                "fields=id,name,first_name,last_name,email,gender,birthday,age_range,picture,cover,devices,is_verified&" +
                "access_token=" + accessToken;
            var httpClient = new System.Net.Http.HttpClient();
            var json = await httpClient.GetStringAsync(requestUrl);
            var profile = Newtonsoft.Json.JsonConvert.DeserializeObject<FacebookProfile>(json);

            //情報を取得する
            string id = profile.Id;
            string firstName = profile.First_Name;
            string lastName = profile.Last_Name;
string email = profile.Email;
            string gender = profile.Gender;
        }
    }
}

※Facebookデータを取得する際のURLを組み立てるには、Graph API Explorerで確認すると簡単です。使用方法につきましては、次回の記事「Graph API Explorer の使用方法」をご参考ください。
※誕生日を取得したい場合はパーミッション(user_bithday)の使用をFacebookに申請しないといけません。
※モデルクラスのFacebookProfileクラスは取得したJson情報をC#に変換するサイトで簡単に作成が可能です。また、次の記事「Facebook Graph API v2で友達の情報を取得する方法」でもご紹介しています。
※Newtonsoft.JsonはNuGetパッケージから取得できます。
※友達の情報を取得する方法につきましては次の記事「Facebook Graph API v2で友達の情報を取得する方法」をご参考ください。



【参考URL】
Xamarin Graph API
https://channel9.msdn.com/Blogs/MVP-Windows-Dev/Login-with-Facebook-in-Xamarin-Forms

Facebook permission
https://developers.facebook.com/docs/facebook-login/permissions/?locale=ja_JP




最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。