Word Press Voice Over Authentication

by haruharuharuby

Slide 1

Slide 1 text

WordPress Voice Over Auth For 09/03 Word Bench Osaka/Kyoto/Nagano TiNm’S

Slide 2

Slide 2 text

Tomoharu Ito 税法上今年は　　　のフリーランスコミュニティ　　　　を運営発起人在住プログラマー (2017年 7月〜だれやねん。

Slide 3

Slide 3 text

こんなログイン画面を作ります。

Slide 4

Slide 4 text

Voice Over Auth User ①、⑥ ②、⑦ ④ ⑤ ⑧ ③

Slide 5

Slide 5 text

ザクッと概要 1. ユーザーがログイン画面を表示 2. ログイン画面表示時に、ワンタイムパスワードの生成をリクエスト 3. パスワードをpush通知 4. ユーザーはAmazon Echoにパスワードを言う 5. ユーザーが発話したパスワードを認証 6. ユーザーはユーザーとパスワードを入力してログイン 7. 認証が通過しているかをチェック 8. 通常のWP認証と⑥の認証が通過してれば、ログインを許可

Slide 6

Slide 6 text

材料ユーザーがログインしたときに、ワンタイムパスワードの発行をリクエストするプラグインが必要。

Slide 7

Slide 7 text

材料パスワードの発行、失効、認証を行うバックエンドが必要。今回はAWSを利用し、サーバーレスで構築。

Slide 8

Slide 8 text

材料ユーザーからの発話を受け付けるAlexa Skill が必要。

Slide 9

Slide 9 text

TiNm’S WordPress プラグイン

Slide 10

Slide 10 text

ベースとなるWordPress

Slide 11

Slide 11 text

Wp voice authentication plugin ログイン画面のカスタマイズ認証処理をフック

Slide 12

Slide 12 text

Wp Voice Authentication Plugin ４０行くらい。

Slide 13

Slide 13 text

API をたたくためのAPI wp_remote_get wp_safe_remote_post wp_remote_post wp_remote_request などなど。。

Slide 14

Slide 14 text

TiNm’S 認証API

Slide 15

Slide 15 text

認証API https://voa.tinms.net/code

Slide 16

Slide 16 text

認証API リソースパス HTTP メソッド機能 /code GET 認証されてるいか確認 PUT ワンタイムパスワードの生成 PATCH 認証処理 DELTE ワンタイムパスワードの破棄

Slide 17

Slide 17 text

認証API できるだけ少ないリソースで、多くの処理をまかなえるように考える。

Slide 18

Slide 18 text

バックエンドはAWS でサーバーレスに構築 API Gateway

Slide 19

Slide 19 text

バックエンドはAWS でサーバーレスに構築 130行くらい

Slide 20

Slide 20 text

バックエンドはAWS でサーバーレスに構築パスワードの発行はダイナモで管理

Slide 21

Slide 21 text

Alexa Skill User: Alexa, ask wp authentication Alexa: Hi! Please your authentication code User: 1234 Alexa: OK! You can log in your WordPress.