読者です 読者をやめる 読者になる 読者になる

C#からOneDrive API(1) UWPで認証

C# UWP Xamarin OneDrive

あすかです。

C#から使えるクラウドサービスはいろいろあります。
その中でも今回は、OneDriveを紹介します。

え、OneDriveってただのストレージサービスでしょ?と思われるかもしれませんが、
実はREST APIを提供しています。
つまり、いろいろな言語から、REST APIを通してOneDriveの中を覗き見できるということです。アップロードもできるよ!

Microsoftが、公式でPCL向けOneDrive SDKを公開していますので、ありがたく使わしてもらいましょう。

github.com

今回はUWP、Xamarin.Forms(Android/iOS)で、このSDKを使います!



導入

OneDrive APIキーの取得

まず、OneDriveのAPIキーをとってきましょう!

Enable sign in for Office 365 and enterprise users – Microsoft Identity Platform

このリンクから、Application Registration Portalの「マイアプリケーション」を開きます。
「集中型アプリケーション」の「アプリの追加」をクリックします。

f:id:kmynews:20170312101529p:plain

アプリの名前を入力します。

f:id:kmynews:20170312101555p:plain

アプリケーションができるので、次に、「プラットフォームの追加」で、

f:id:kmynews:20170312101905p:plain

「Web」をクリックし、

f:id:kmynews:20170312101926p:plain

画面の一番下にある「保存」を、忘れずにクリックします。

f:id:kmynews:20170312102017p:plain

今回、プログラム内ではAPIキーをこういう感じで保存します。


VSプロジェクトの準備

今回は、以下の5つのプロジェクトを用意します。

  • Xamarin.FormsのPCLプロジェクト
  • Xamarin.Androidプロジェクト
  • Xamarin.iOSプロジェクト
  • UWPプロジェクト (Non Xamarin.Forms。ネイティブで作ります)
  • Xamarin.Forms PCLと、UWPからアクセスできる共有プロジェクト

プロジェクトを作った後、Nugetパッケージを、Xamarin.FormsのPCLと、UWPの2つのプロジェクトに導入します。

Install-Package Microsoft.OneDriveSDK

設計

基本設計

今回は、こういう設計にします。
認証とOneDriveの操作を別々のクラスにします。
ViewModelから2つのモデルをつなげる感じです。

f:id:kmynews:20170312100859p:plain

認証のために

実は、OneDrive APIは、REST APIだけで認証することはできません。
必ず、ブラウザを介して認証しないと、OneDrive APIが使えません。

まず、認証ページをブラウザで表示して、

f:id:kmynews:20170312103228p:plain

ユーザが「はい」ボタンを押した後に遷移するページのURLに、REST APIでの認証に必要なアクセストークンが入っている感じです。
なのでまず、ブラウザをなんとかしなければいけません。

ブラウザばかりはさすがに、UWPとXamarin.Forms、それぞれに固有の機能を使わなければいけません。
両方のプロジェクトにアクセスできる共通部分からブラウザを開くために、こうしてみます。

f:id:kmynews:20170312103752p:plain

MainPageIAuthBrowserProviderIAuthBrowserのインターフェースを実装し、OneDriveViewModelから直接操作できるようにします。
これなら、同一のロジックでUWPとXamarin.Formsの画面を操作できるし、いいっしょ!
UWPもXamarin.Formsから使えるってのは内緒で

IAuthBrowserProviderは、IAuthBrowserを渡してくれます。このIAuthBrowserを使って、ブラウザを操作します。
なぜこれら2つの機能をわざわざ別々のインターフェースに分けているかというと、実際の運用では、OneDriveの認証を開始する操作(ログインボタン)と、認証するための画面(ブラウザ表示)を、別々の画面に表示することが多いかなーと思った感じです。

もちろん実際はみんなの好みで!!(`・ω・´)

IAuthBrowserProvider
IAuthBrowser
MainPage(上2つのインターフェースを実装)
XAML

IAuthenticationProvider

ああ、そうだ、1つ忘れてました。

f:id:kmynews:20170312105003p:plain

IAuthenticationProviderオプションもおつけしましょう。
(OneDrive SDKをインストールする時に入ってくるので自分で定義する必要はないです)

このインターフェースは、以下のメソッドを実装します。

Task AuthenticateRequestAsync(HttpRequestMessage request);

これは、HTTPのリクエスト・メッセージに、OneDrive認証に必要な情報をつけるメソッドです。
こうやって書きます。

このインターフェースは、後でOneDrive SDKの中に入っているOneDriveClientクラスのインスタンスを作る時に必要になります。

制作!

今回は、OneDriveのRootフォルダ(OneDriveにログインした時最初に表示されるページ)直下のファイル・フォルダを列挙して表示するロジックを作ります。
あらかじめOneDriveアカウントを取得して、適当なファイルを置いてみましょう!

ユーザ認証ページへアクセスする

URLは自分で作らなければいけません。
公式SDKがあるのに身も蓋もない。

ここでURLを作成します。
APIキーは、さっきの「アプリケーションID」になります。

作ったURLにブラウザからアクセスすると、

f:id:kmynews:20170312124028p:plain

こういうページが表示されます。
ここで「はい」をクリックすると、ページ遷移が発生します。
今回のプログラムでは、ブラウザのページ遷移が発生するたび、OnAuthBrowserNavigatedメソッド(後述)が呼び出されるようになっています。

遷移先のURLには、

f:id:kmynews:20170312124311p:plain

こんなバカ長いアクセストークンが入っていますので、これを抜きます。

以下は、URLからパラメータを抜き出すメソッドです。
「?」ではなく「#」で区切っているところに注意してください。

パラメータを抜き取ったら、パラメータの中にある、

を抜いて、保存します。

以下は、認証に関係なくブラウザで画面遷移がおこなわれるたび毎回呼び出されるようになっていますので、認証完了したかどうかの判定(access_tokenの存在チェック)も入っています。

ここで、IAuthenticationProviderの実装を再掲してみましょう。

さっき抜き取った変数が、ここの変数とリンクしてますね!

そして、認証が完了したら、ここのメソッドが呼び出されるようになっています。

IAuthenticationProviderが実装されたOneDriveAuthModelを、OneDriveClientをnewする際に渡しています。
あと、詳しくは後でまた説明しますが、Rootフォルダ直下にあるフォルダやファイルの一覧を画面に表示します。

f:id:kmynews:20170312124818p:plain

やったー!!!

まとめ

今回のプログラムはここにあります。

github.com

認証あたりで、URL生成などが機能に含まれていないため分かりづらいかもしれませんが、OneDriveの公式SDKでPCLから認証することができます。
次回はこれをXamarin.Formsからやってみます。すぐ終わるかもですが(´・ω・`)

kmycode.hatenablog.jp