Last active
December 16, 2018 07:13
-
-
Save ryu22e/7f10a531296f420d472a4f4b09ce0e20 to your computer and use it in GitHub Desktop.
WebAuthnサインアップ（クライアントサイド）
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% load static %} | |
| {# users/signup.html #} | |
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>サインアップ- django_webauthn_example</title> | |
| </head> | |
| <body> | |
| <h2>サインアップ</h2> | |
| <div id="signup"> | |
| <form v-on:submit.prevent="onSubmit" :disabled="!isSupported" method="post"> | |
| <div v-if="!isSupported">このブラウザはWeb Authentication APIをサポートしていないため、アカウントの作成ができません。</div> | |
| {% csrf_token %} | |
| {{ form.as_p }} | |
| <button type="submit" :disabled="!isSupported">サインアップ</button> | |
| </form> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| {# これを使っている→ https://github.com/paroga/cbor-js #} | |
| <script src="{% static 'js/libs/cbor.min.js' %}"></script> | |
| <script src="{% static 'js/users/signup.js' %}"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| // static/js/users/signup.js | |
| var isSupported = navigator !== undefined && ('credentials' in navigator); | |
| var csrftoken = Cookies.get('csrftoken'); | |
| new Vue({ | |
| el: '#signup', | |
| delimiters: ['[[', ']]'], | |
| data: { | |
| username: '', | |
| displayName: '', | |
| isSupported: isSupported | |
| }, | |
| methods: { | |
| onSubmit: function () { | |
| if (!this.isSupported) { | |
| return; | |
| } | |
| fetch('/users/apis/register-begin/', { | |
| method: 'POST', | |
| body: JSON.stringify({ | |
| username: this.username, | |
| display_name: this.displayName | |
| }), | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'X-CSRFToken': csrftoken | |
| } | |
| }).then(function(response) { | |
| if(response.ok) { | |
| return response.arrayBuffer(); | |
| } | |
| throw new Error('Error getting registration data!'); | |
| }).then(CBOR.decode).then(function(options) { | |
| return navigator.credentials.create(options); | |
| }).then(function(attestation) { | |
| return fetch('/users/apis/register-complete/', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/cbor', | |
| 'X-CSRFToken': csrftoken | |
| }, | |
| body: CBOR.encode({ | |
| "attestationObject": new Uint8Array(attestation.response.attestationObject), | |
| "clientDataJSON": new Uint8Array(attestation.response.clientDataJSON), | |
| }) | |
| }); | |
| }).then(function(response) { | |
| var stat = response.ok ? '成功' : '失敗'; | |
| alert('アカウント登録に' + stat + 'しました。'); | |
| }, function(reason) { | |
| alert(reason); | |
| }); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment