「Credential Management APIを使ってみた話」 20161025 千葉團

14

Transcript of 「Credential Management APIを使ってみた話」 20161025 千葉團

Page 1: 「Credential Management APIを使ってみた話」 20161025 千葉團
Page 2: 「Credential Management APIを使ってみた話」 20161025 千葉團

Credential Management

APIを

使ってみた話

モケラボ株式会社

Page 3: 「Credential Management APIを使ってみた話」 20161025 千葉團

モケラだ

広報だよ

Page 4: 「Credential Management APIを使ってみた話」 20161025 千葉團

グッズあるよ!

Page 5: 「Credential Management APIを使ってみた話」 20161025 千葉團

Credential Management

API

って何?

Page 6: 「Credential Management APIを使ってみた話」 20161025 千葉團
Page 7: 「Credential Management APIを使ってみた話」 20161025 千葉團
Page 8: 「Credential Management APIを使ってみた話」 20161025 千葉團
Page 9: 「Credential Management APIを使ってみた話」 20161025 千葉團

navigator.credentials.store(new PasswordCredential({ id: username, password: password,})).then((c) => { // おわったときの処理

});

保存する

Page 10: 「Credential Management APIを使ってみた話」 20161025 千葉團

取り出す

navigator.credentials.get({ password: true,}).then((c) => { return fetch('/api/v1/token', { method: 'POST', credentials: c, })}).then((resp) => { // fetchの結果からトークンを取り出す

});

Page 11: 「Credential Management APIを使ってみた話」 20161025 千葉團

注意点

● HTTPS必須!● navigator.credentials.get()

の結果からパスワードはとれないよ○ fetch()を使うしかない

● multipart/form-dataでID/Passが飛んでくる○ ログインAPIがJSON受け取りだとサ

ポートできない

Page 12: 「Credential Management APIを使ってみた話」 20161025 千葉團

注意点

● credentials付きfetch()は別ドメインにリクエストを投げれない○ ログイン機能をKii Cloud(ステマ)や

Firebaseにやらせる場合は、中継サーバーが必要

Page 13: 「Credential Management APIを使ってみた話」 20161025 千葉團

ログインを快適にしよう!

Page 14: 「Credential Management APIを使ってみた話」 20161025 千葉團

モケラをみんなに広めよう

ログインを快適にしよう!