「credential management apiを使ってみた話」 20161025 千葉團
TRANSCRIPT
![Page 1: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/1.jpg)
![Page 2: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/2.jpg)
Credential Management
APIを
使ってみた話
モケラボ株式会社
![Page 3: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/3.jpg)
モケラだ
よ
広報だよ
![Page 4: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/4.jpg)
グッズあるよ!
![Page 5: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/5.jpg)
Credential Management
API
って何?
?
![Page 6: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/6.jpg)
![Page 7: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/7.jpg)
![Page 8: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/8.jpg)
![Page 9: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/9.jpg)
navigator.credentials.store(new PasswordCredential({ id: username, password: password,})).then((c) => { // おわったときの処理
});
保存する
![Page 10: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/10.jpg)
取り出す
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://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/11.jpg)
注意点
● HTTPS必須!● navigator.credentials.get()
の結果からパスワードはとれないよ○ fetch()を使うしかない
● multipart/form-dataでID/Passが飛んでくる○ ログインAPIがJSON受け取りだとサ
ポートできない
![Page 12: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/12.jpg)
注意点
● credentials付きfetch()は別ドメインにリクエストを投げれない○ ログイン機能をKii Cloud(ステマ)や
Firebaseにやらせる場合は、中継サーバーが必要
![Page 13: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/13.jpg)
ログインを快適にしよう!
![Page 14: 「Credential Management APIを使ってみた話」 20161025 千葉團](https://reader034.vdocuments.pub/reader034/viewer/2022051404/58f06d4e1a28ab90538b45a1/html5/thumbnails/14.jpg)
モケラをみんなに広めよう
ログインを快適にしよう!