Voiceflow夏休みAdvent Calendarの30日目、兼、スマートスピーカーミーティング#12でLTしてきた、のまとめエントリです。
昨日行われた、@gaomarさん主催のスマートスピーカーミーティング、今月も参加してきました！今回のテーマは「アカウントリンキング」ということで、Voiceflowを使ってLINEログインとアカウントリンクして、Messaging APIを使ってリンクしたアカウントにメッセージを送るという話をしてきました。
発表資料
動画（8:30〜23:00あたり）
いつもありがとうございます！＞@gaomarさん、@diberidarshiさん
補足
ということで、LTの中では駆け足だったので、実際の設定内容とかを少し補足的に説明します。
LINEログインとMessaging APIの設定
画面イメージは資料をご覧ください。ここでは設定すべき内容を記載します。
LINEログイン
- 新規チャネル作成で「LINEログイン」を選択
- 以下の項目を設定して「入力内容を確認」
- アプリ名：（適当に）
- アプリ説明：（適当に）
- アプリタイプ：「WEBで使う」を選択
- メールアドレス：（お使いのメールアドレスを設定）
- 規約に同意して「作成」をクリック
- （重要）Channel IDとChannel Secretを控えておく
LINE Messaging API
- 新規チャネル作成で「Messaging API」を選択
- 以下の項目を設定して「入力内容を確認」
- アプリ名：（適当に）
- アプリ説明：（適当に）
- 大業種：（適当に）
- 小業種：（適当に）
- メールアドレス：（お使いのメールアドレスを設定）
- 規約に同意して「作成」をクリック
- チャネル基本設定で以下を設定
- アクセストークンを「再発行」、執行までの時間はとりあえず「0」でOK。（重要）表示されるアクセストークンを控えておく。
- ※資料では「Webhook送信」を利用するにしてますがこれは必要ないです
- QRコードを読み込んで友だちになっておく。
Voiceflow
- スキルの設定画面の「Advanced」から以下を設定
- URL Authentication: "https://access.line.me/oauth2/v2.1/authorize"
- Access Token URL: "https://api.line.me/oauth2/v2.1/token"
- Clientタブ
- Client ID: LINEログインのChannel IDを貼り付ける
- Client Secret: LINEログインのChannel Secretを貼り付ける
- Scopeタブ
- Scopes: profile を入力
- その他はデフォルトでOK
- この状態で一旦Alexa開発者コンソールにアップロード
- Alexa開発者コンソールで、
Alexa開発者コンソール
- 該当スキルの「ビルド」画面の左下の「アカウントリンク」を開く
- （重要）一番下にある「Alexaのリダイレクト先URL」をすべて控えておく
LINEログイン（再度）
- アプリ設定のCallbackURLに、Alexa開発者コンソールで取得したURLをすべて貼り付ける。
Voiceflow
前準備が非常に長かったですね・・・気を取り直していよいよフローを作っていきます。
変数の作成
以下の変数を作成します。
上記の変数の意味は以下です。
| 変数名 | 用途 |
|---|---|
| options | LINEログインAPIからレスポンスを取得して一時的に入れておきます |
| userid | 上記のレスポンスからユーザIDに当たる部分を抽出して、一時的に入れておきます |
| mesgres | LINE Messaging APIからのレスポンスを入れておくための変数です。特に大した情報は帰ってこないので別にいらないといえばいらないですが、一応。 |
| MsgApiToken | LINE Messaging APIで取得したチャネルアクセストークンを設定します。 |
なお、以下についてはデフォルトで用意されており、作成する必要はありませんが、アカウントリンクで使用します。
| 変数名 | 用途 |
|---|---|
| access_token | アカウントリンクが完了するとここにアクセストークンが保存されます |
アカウントリンクの確認
この部分では、起動後に初期化を行った後、アカウントリンク済かどうかをチェックします。
Speak Blockで起動時の発話を行います。
Set BlockでMessaging APIのチャネルアクセストークンをセットします。
User Infoブロックでアカウントリンク済みがどうかをチェックします。アカウントリンクが終わっていればaccess_tokenに値がLINEログインのアクセストークンがセットされます。値がない・取れない場合はアカウントリンクされていないと判断して、failパスに流れてアカウントリンクを促す処理を行います。
Permissionブロックでアカウントリンク用のカードをAlexaアプリに送信します。アカウントリンクの設定は最初に終わっているので、こ子では特に設定することはありません。
Speak Blockでアカウントリンクを行うことをユーザに促します。
LINEログインAPIからユーザIDを取得する
この部分では、あとの処理でメッセージを送信するために必要なユーザIDをLINEログインAPIから取得します。
Integration BlockでLINEログインAPIに対してGETでユーザ情報を取得します。Authorizationヘッダでアクセストークンを渡すことで認証を行います。
結果をoptionsに入れます。
ここはAPI実行に失敗した場合です
次に結果としてかえってきたユーザ情報のうち、ユーザIDだけを抽出します。ここは前のIntegration Blockの中でやってしまってもいいですね、デバッグしてたときの名残で残ってます。
Code Blockで失敗した場合の処理です。ここもCode BlockをIntegration に組み込んでしまえば不要ですね。
Messaging APIへのメッセージ送信
最後の部分では、この前で取得したユーザIDに対してメッセージを贈ります。
Integration BlockでLINE Messaging APIにPOSTでリクエストを送ります。Authorizationヘッダで認証するのはログインAPIと同じですが、こっちはチャネルアクセストークンで認証する点に注意してください。また、Content-Typeの設定も必要です。
今回は送信するメッセージはオブジェクトを作って送信しますので、リクエストボディをrawで設定します。toに{userid}が指定されているのがわかりますか？ログインAPIで取得したユーザIDをここで指定することで、対象のユーザにメッセージを送れるというわけです。
使わないですが、一応結果も取得しておきます。
見にくいと思うので、Expandした状態もここに貼っときます。
最後に成功時と失敗時の発話も用意しておきます。
実際の実行結果の詳細は資料の方をご覧いただければと思いますが、こんな感じです。
まとめと注意点
いかがでしたでしょうか？アカウントリンク、いつかやりたいとずっと思っていたので、できた時はちょっと飛び上がって喜んでしまいました。基本的な考え方は同じなので、TwitterやFacebook等もそれぞれのAPIにあわせて少し変更すればできるのではないかと思います。
最後にいくつか注意点を。
- アカウントリンクするとユーザ情報へアクセスができるようになります。このユーザ情報、言ってしまうと場合によっては個人情報にアクセスできることになってしまいます。したがって取り扱いには十分ご注意ください。無駄に多く取らずに、本当に必要な情報だけに制限したほうがいいと思います。
- また、それらの情報をスキル内に保存する場合もよく考えてください。できる限り、フロー変数を使って、必要なときに取得するようにして、あくまでも一時的な利用に留めるほうが安全です。
- また、Messaging APIは無料枠がありますが、それを超えると有料となりますので、ご注意ください。詳細はLINEの公式サイトからご確認ください。
- 実際にスキルを審査・公開するにあたっては、上記以外にAlexa/LINE共にいろいろ準備が必要になると思いますのでご注意ください。
このあたりに注意して、スキル開発の幅を広げていただければと思います！
