記事更新日: 2018年06月06日

MicrosoftGraphワラベンチャー

KITASHIRAKAWA_Chiyuri
クラウドのデータを、ネイティブ アプリに取り込もうぜ☆
Let's I get data from cloud to native application.

対象読者 - Target audience.

プラットフォーム - Platform Windows
用途 - Use Microsoft クラウド上のデータを、ネイティブ アプリに取り込みたい
- I want to import data on the Microsoft cloud into a native application.
使用ソフトとインストール方法 - Used software and instration インターネットに接続できる環境
Node.js

目次 - Table of contents.

戻る - back

1. マイクロソフト グラフ エクスプローラー
- Microsoft Graph Explorer.

20180606msgraph1.png

Graph Explorer

KITASHIRAKAWA_Chiyuri
こういう練習サイトがある☆
Run Query ボタンを押すと、データを取ってこれるという例だぜ☆
https://graph.microsoft.com/v1.0/
KITASHIRAKAWA_Chiyuri
Microsoft は graph.microsoft.com というドメイン(URL)を開放していて、
ブラウザなどから このURLにアクセスすれば
クラウドのデータを取ってきたり、機能を使うことができる感じなのだろう☆
https://graph.microsoft.com/v1.0/me
KITASHIRAKAWA_Chiyuri
うしろに機能が付く。me はプロフィールを見るんだぜ☆
20180606msgraph2.png

Graph Explorer

KITASHIRAKAWA_Chiyuri
出ているデータは仮のものだが、
Microsoftアカウントにサインインすると、自分のデータが出てくるだろ☆
JSON形式だぜ☆
OKAZAKI_Yumemi
これでデータ取ってこれるんじゃないの?
KITASHIRAKAWA_Chiyuri
ユーザー認証が別だぜ☆
ブラウザのアドレス欄に入れてみればわかる☆
20180606msgraph3.png
OKAZAKI_Yumemi
何これ?
KITASHIRAKAWA_Chiyuri
Bearer と書いてるところがあるが、
ユーザー認証ができてないんで、弾かれたんだぜ☆
HTTPのレスポンス・コードを付けてくれないんで HTTPじゃないのか分からんが……☆
OKAZAKI_Yumemi
どうやってユーザー認証すんの?
KITASHIRAKAWA_Chiyuri
認証用の Webサーバを用意する必要がある☆
この Microsoft Graph Explorer では ユーザ認証 の説明は省いている☆
ユーザ認証したあとの、クラウド機能のプレイグラウンド(試遊)だぜ☆
20180606msgraph4a1.png
KITASHIRAKAWA_Chiyuri
お試しで ユーザ認証済み にしてみることは できるぜ☆
20180606msgraph5a1.png
KITASHIRAKAWA_Chiyuri
こんな感じで、データを取ってこれるぜ、
という練習だぜ☆
OKAZAKI_Yumemi
でもユーザー認証できないから取ってこれないんでしょ?
KITASHIRAKAWA_Chiyuri
そこだぜ☆
KITASHIRAKAWA_Chiyuri
ま、練習で できること 先に終わらそうぜ☆
20180606msgraph6a1.png
KITASHIRAKAWA_Chiyuri
あれ☆? プロフィール画像出ね☆
なんでか知らね☆ 次へ☆
20180606msgraph7a1.png
OKAZAKI_Yumemi
何これ?
KITASHIRAKAWA_Chiyuri
サーバにあるメールボックスの内容じゃないか☆?
20180606msgraph8a1.png
KITASHIRAKAWA_Chiyuri
ほら、メールっぽい内容が書いてあるぜ☆
KITASHIRAKAWA_Chiyuri
他にグーグル・ドライブの内容を出したりするのがあるようだが、
ID 出されまくるんで 見せないぜ☆
戻る - back

2. アプリケーションをマイクロソフトに登録
- Register application to Microsoft.

KITASHIRAKAWA_Chiyuri
どんな アプリケーション を作って、クラウドにアクセスしてくるのか、
マイクロソフトに登録しようぜ☆
20180610msgraph1.png
KITASHIRAKAWA_Chiyuri
マイクロソフト アカウントにログインしろだぜ☆
20180610msgraph2a1.png
KITASHIRAKAWA_Chiyuri
クラウドにアクセスしてくるアプリケーションを
ここに一覧すればいい☆ [アプリの追加]ボタンをクリックしろだぜ☆
20180610msgraph3a1.png
KITASHIRAKAWA_Chiyuri
アプリケーションの名前を入れて
[Create]ボタンをクリックしろだぜ☆
わたしは GraphPlayground と入れてみるぜ☆
20180610msgraph4a1.png
KITASHIRAKAWA_Chiyuri
アプリケーションの名前でページが作られたな☆
ここでやることは アプリケーションID を覚えて保存しろだぜ☆
20180610msgraph4a2.png
KITASHIRAKAWA_Chiyuri
[新しいパスワードを生成]ボタンをクリックしろだぜ☆
20180610msgraph5a1.png
KITASHIRAKAWA_Chiyuri
パスワードはあとで2回ぐらい使うんで、テキストファイルなどに保存しておけだぜ☆
KITASHIRAKAWA_Chiyuri
このシークレットは忘れてしまったら、また[新しいパスワードを生成]ボタンをクリックしなおせだぜ☆
20180610msgraph6a1.png
KITASHIRAKAWA_Chiyuri
[プラットフォームの追加]ボタンをクリックしろだぜ☆
20180610msgraph6a1.png
KITASHIRAKAWA_Chiyuri
[プラットフォームの追加]ボタンをクリックしろだぜ☆
20180610msgraph7a1.png
KITASHIRAKAWA_Chiyuri
[Web]ボタンをクリックしろだぜ☆
あれっ? ネイティブ・アプリケーションじゃないの? と思うかもしれないが
マイクロソフトのドキュメントに 欲しい例がなくて萎えた☆ そっちは自習しろだぜ☆
認証Webサーバ を立てる方法を解説する☆
20180610msgraph8a1.png
KITASHIRAKAWA_Chiyuri
[リダイレクト URL]テキストボックスに そうだな、例えば
https://localhost:3000/token
とか入れろだぜ☆
KITASHIRAKAWA_Chiyuri
このURLが何かと言えば、
マイクロソフトのホームページに サインイン してください、と出てきて、
サインインとか、承諾とか完了したあとに 戻ってくるページだぜ☆
つまり自分の Webアプリケーションの入り口URLを入れろだぜ☆
20180610msgraph9a1.png
KITASHIRAKAWA_Chiyuri
「委任されたアクセス許可」の横の[追加]ボタンをクリックしろだぜ☆
これが何かというと、
メールボックスにアクセスします、とか ユーザーに許可の確認を取りたいものを選ぶわけだぜ☆
20180610msgraph10a1.png
KITASHIRAKAWA_Chiyuri
[Files.Read] と [Mail.Send] の2つを追加でクリックして [OK]ボタンをクリックしろだぜ☆
あとで、サンプル・プログラムで使う☆
何個までユーザーに許可取れるのかボタン押しまくったら30個までだったぜ☆
20180610msgraph11a1.png
KITASHIRAKAWA_Chiyuri
とりあえず 最低限これだけで エグザンプルを試すことはできる☆
[保存]ボタンをクリックしろだぜ☆
20180610msgraph12.png
KITASHIRAKAWA_Chiyuri
これで マイクロソフト側の受け入れ設定は完了だぜ☆
戻る - back

3. ユーザ認証の実装を検討しようぜ
- Let's consider implementing user authentication.

20180606msgraph9a1.png
KITASHIRAKAWA_Chiyuri
で、Microsoft Graph の使い方の一覧に Java は無いぜ☆
KIFUWARABE
Androidは Javaだろ☆
KITASHIRAKAWA_Chiyuri
誰がサーバサイドで Android なんか使うんだぜ☆?
OKAZAKI_Yumemi
Node.js でいいんじゃないの?
KITASHIRAKAWA_Chiyuri
Node.js が Webサーバ 立てるの楽なの もっと知られてたら 使うんだけどな☆
サーバ屋には、サーバサイドと言えば Java、というと通りがいいだろ☆?
Oracle もそう思って Java 買収したんだろ☆
迂回路に関を置いて 通行料商売してる Oracle 様に高い用心棒代を 払えだぜ☆
KIFUWARABE
Microsoft Graph に、サーバサイドJava なんか選択肢にないじゃないか☆?
今どき Oracle に金払わなくてもクラウドはできる、というMicrosoftの意向なんじゃないのか☆?
KITASHIRAKAWA_Chiyuri
前門のOracle/Java、後門のMicrosoft お父ん 寝込みたい☆
案件のサーバに Linux を使っている図があったので IIS や iOS は無しで☆
20180606msgraph10a1.png
KITASHIRAKAWA_Chiyuri
とりあえず、作業の流れ を続けるぜ☆
プラットフォームは あとで考えるから 練習では何でもいい☆
これからアプリケーションを作るわけだが、
アプリケーションに紐づく シークレットID というのを取りに行くんだぜ☆ app ID とかいうのがそれだぜ☆
20180606msgraph11a1.png
KITASHIRAKAWA_Chiyuri
こんな感じで付けたアプリケーション名に、シークレットIDが紐づく分けだぜ☆
練習では名前は勝手に付けられている☆
20180606msgraph12a1.png
KITASHIRAKAWA_Chiyuri
チュートリアルを進んでいくと、例えば Android には認証フローの説明があるわけだぜ☆
Java には無い☆
KIFUWARABE
ひがむな、お父ん☆
20180606msgraph13.png

microsoftgraph/msgraph-sdk-java

OKAZAKI_Yumemi
Git Hub にあるんじゃないの?
KITASHIRAKAWA_Chiyuri
バグがあったとき、客に突っつかれるのは わたしだぜ☆
ライブラリの持ち主がメンテしてくれるわけじゃない☆
メンテナンスがわたしにかかってくるものは 使わない☆
わたしは全部 Microsoft のせいにしたい☆
KIFUWARABE
wwwwwwwwwwwwww☆
KITASHIRAKAWA_Chiyuri
恐らく サンプルは無いんで、構造を理解して
Java で作ろうぜ☆
KIFUWARABE
Node.js とかにしとけば 簡単そうなのに……☆
20180606msgraph14.png
KIFUWARABE
見ろ、Node.js とか簡単そうだぜ☆
KITASHIRAKAWA_Chiyuri
作るのが簡単な Node.js より、
サーバ屋に名の通ってる Java だろ☆
KIFUWARABE
…………☆!
戻る - back

4. Web認証サーバの ノード ジェイエス ソースのダウンロード
- Downloading Web Authentication Server's Node.js source.

KITASHIRAKAWA_Chiyuri
Node.js にします☆
KIFUWARABE
お父んが成長した……☆!
KITASHIRAKAWA_Chiyuri
なんで人格が180°入れ替わったの?
KITASHIRAKAWA_Chiyuri
妥協……☆
あとは Javaで実装したら 不具合の責任をマイクロソフトに押し付けられないんで☆
KIFUWARABE
言いわけ保険か☆
20180608msgraph1a1.png

Microsoft Graph のクイック スタート

KITASHIRAKAWA_Chiyuri
ロックマンに似てるよな……☆ 最初のボスを選べ、みたいな☆
入場2日目でミスると 終わりだぜ☆
KITASHIRAKAWA_Chiyuri
Node.js でいいの?
KITASHIRAKAWA_Chiyuri
REST を叩きたいだけなんだぜ……☆
REST を叩くだけなのに PHP とか Python とか オーバースペックすぎる……☆
軽く蕎麦(そば)でも食べるか、というときに牛丼まで食べてしまう人に似ている☆
KIFUWARABE
Node.js は蕎麦か☆
20180608msgraph2a1.png
KITASHIRAKAWA_Chiyuri
ここでのコツは、決して チュートリアル を選ばないことだぜ☆
チュートリアルも、Git Hub のソースも 最新版ではなかった☆
チュートリアルの途中でエラーが出る☆
KITASHIRAKAWA_Chiyuri
はまりじゃない。
KITASHIRAKAWA_Chiyuri
アメリカン・クォリティだぜ☆
日本語に対訳されているが 本体はアメリカンなんで☆
20180608msgraph3.png
KITASHIRAKAWA_Chiyuri
じゃあ、マイクロソフト帝国にサイン・インしろだぜ☆
嫌なら去れ☆
KITASHIRAKAWA_Chiyuri
他の選択肢は無いの?
KITASHIRAKAWA_Chiyuri
選択肢は無いが、ひざまづくか 野垂れ死ぬかを選択する自由はある☆
選べ☆
KIFUWARABE
自由って何なんだろな☆
20180608msgraph4a1.png
KITASHIRAKAWA_Chiyuri
シークレット というのは秘密という意味だが、アプリケーション名とパスワード を兼ねたものだぜ☆
ソフトの名前とパスワードの2つを入力するのも めんどくさいから 生まれた文化だぜ☆
他人に教えてはいけない☆
KITASHIRAKAWA_Chiyuri
だが、シークレット は すでにマイクロソフトに登録したやつがあるだろ☆
そっちを入れろだぜ☆
ここで表示されたシークレットは無視して、[完了してクリックスタートに戻る]ボタンをクリックしろだぜ☆
20180608msgraph5a1.png
KITASHIRAKAWA_Chiyuri
じゃあ、シークレット を入力しろだぜ☆
20180608msgraph6a1.png
KITASHIRAKAWA_Chiyuri
続けて [REST ベースのコード サンプルをダウンロードする]ボタンをクリックしろだぜ☆
20180608msgraph7.png
KITASHIRAKAWA_Chiyuri
nodejs-connect-rest-sample.zip というファイルをダウンロードできたと思うが、
これの使い方はまた次回だぜ☆
戻る - back

5. Web認証サーバの構築
- Deployment Web Authentication Server.

20180610msgraph13a1.png
KITASHIRAKAWA_Chiyuri
ダウンロードした nodejs-connect-rest-sample.zip ファイルを解凍しろだぜ☆
20180610msgraph14a1.png
KITASHIRAKAWA_Chiyuri
短い名前のディレクトリに移動しておくと、コマンドライン作業が やりやすいだろう☆
20180610msgraph15a1.png
KITASHIRAKAWA_Chiyuri
じゃあ <ルート ディレクトリ>/utils/config.js テキストファイルを開けろだぜ☆
20180610msgraph16a1.png
KITASHIRAKAWA_Chiyuri
ここに、マイクロソフトに登録したアプリケーションの内容がなんで書いているかというと、
一致判定して 合ってるか確認するのに使われているんだぜ☆
KITASHIRAKAWA_Chiyuri
クレデンシャルとか、資格情報とかを確認しろと エラーメッセージが出たら、
この内容が マイクロソフトに登録した内容と合ってないと思われるぜ☆
戻る - back

6. ノード ジェイエス の更新
- Update Node.js.

20180611msgraph17a1.png
KITASHIRAKAWA_Chiyuri
<ルート ディレクトリ>/package.json というファイルがあると思うが、
このファイルで依存するライブラリをバージョン管理している☆ 中を見てみよう☆
20180611msgraph18a1.png
KITASHIRAKAWA_Chiyuri
これが必要なバージョンだぜ☆
現在はどれも揃っていない☆ インストールしていこうぜ☆
20180611msgraph19.png
KITASHIRAKAWA_Chiyuri
[Windows] + [R] キーを打鍵しろだぜ☆
多分、Run の R だろう☆
「ファイル名を指定して実行」ダイアログボックスが出てくるぜ☆
20180611msgraph20a1.png
KITASHIRAKAWA_Chiyuri
「cmd」と入力して [Enter] キーを打鍵しろだぜ☆
「コマンド プロンプト」ウィンドウが出てくるぜ☆
20180611msgraph21.png
KITASHIRAKAWA_Chiyuri
「コマンド プロンプト」ウィンドウが出たら……☆
20180611msgraph22a1.png
KITASHIRAKAWA_Chiyuri
「cd <ルート ディレクトリ>」と打鍵しろだぜ☆
わたしなら「cd E:\msgraph-playground」だぜ☆
20180611msgraph23a1.png
KITASHIRAKAWA_Chiyuri
あっ、できね☆!
フォルダーを Cドライブ へ移動して やりなおすぜ☆