作ろうとしたもの
- ボタンを押したら、XMLHttpRequestをする
index.html
<html>
<head>
<title>Index</title>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
/* API Keys */
};
firebase.initializeApp(config);
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-form v-model="valid" ref="form" lazy-validation>
<v-btn
@click="twitterLogin"
color="info"
>TwitterLogin</v-btn>
<button type="button"
v-on:click="login"
>
login
</button>
</v-form>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src=javascripts/index.js type="text/javascript"></script>
</body>
</html>
javascripts/index.js
var token = "";
var secret = "";
var example1 = new Vue({
el: '#app',
data: () => ({
/* something */
}),
methods: {
twitterLogin: function(){
twitterLogin();
},
login: function (event) {
login();
}
}
})
function twitterLogin() {
firebase.auth().languageCode = 'ja';
var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
token = result.credential.accessToken;
secret = result.credential.secret;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
}
function login() {
var user = firebase.auth().currentUser;
var screemName = "";
if (user != null) {
user.providerData.forEach(function (profile) {
screemName = profile.displayName;
console.log("Sign-in provider: "+profile.providerId);
console.log(" Provider-specific UID: "+profile.uid);
console.log(" Name: "+profile.displayName);
console.log(" Email: "+profile.email);
console.log(" Photo URL: "+profile.photoURL);
});
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
switch ( xhr.readyState ) {
case 4: // データ受信完了.
if( xhr.status == 200 ) {
var data = xhr.responseText;
console.log( 'COMPLETE! :'+data );
}
break;
}
};
xhr.open( 'GET', "url", true );
xhr.send();
}
}
ハマったところ
FirebaseのTwitter認証を利用しています。認証の際、ユーザーは認証画面に飛ばされます。
問題だったのは、XMLHttpRequestをする時です。コードの通り、<button>をクリックするとlogin()メソッドが呼ばれます。
このボタンを<v-btn>にするとうまく動いてくれませんでした。エラー内容はDOMに関することでした。
公式ドキュメントにもありましたが、こういうことするときは普段通り<button>を使ってくれとのことでした。
※上のドキュメントのリソースを検索中です
おまけ
<button type="button"...とtypeを指定しているのは、指定しないとなぜかChromeではリロードされるためです。
【追記】自分なりの解決方法
<v-btn>を<div>で囲んで、<div>にクリックイベントを設定する
<div @click="twitterLogin"><v-btn dark color="info">TwitterLogin</v-btn></div>