前端通过firebase接入google、apple、twitter登录

准备工作: 在firebase将相关项目信息进行申请firebase https://console.firebase.google.com/

这里不赘述平台配置过程。。。

firebase基于oAuth整合集成了各个平台的登录接入，我们使用firebase只需要与其通信而其作为中间媒介将帮你做对接其他第三方平台的工作。

web端的google、apple、twitter login接入过程：

import firebase from "firebase/app";
import "firebase/auth";
var firebaseConfig = {
  apiKey: "AIzxxsssssSEzn0WPIZv8XQDE",
  authDomain: "xxxx.firebaseapp.com",
  databaseURL: "https://xxxx.firebaseio.com",
  projectId: "xxxxx",
  storageBucket: "xxxxx.appspot.com",
  messagingSenderId: "121231236028",
  appId: "1:15323232:web:2623232356f0e9",
  measurementId: "G-G92323614",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

    async googleLogin() {
      let that = this;
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(async function(result) {
          console.log("google结果：", result);
          var accessToken = result.credential.accessToken;
          // var idToken = result.credential.idToken;
          var openid = result.additionalUserInfo.profile.id;
          const userInfo = { access_token: accessToken, openid: openid };
          that.$store
            .dispatch("user/googlein", userInfo)
            .then(() => {
              that.$store.dispatch("user/hasnew");
              that.dialog = false;
            })
            .catch(() => {
              console.log("error submit!!");
            });
          // This gives you a Google Access Token. You can use it to access the Google API.

          // The signed-in user info.
          // var user = result.user;
          // var credential = firebase.auth.GoogleAuthProvider.credential(
          //   idToken,
          //   accessToken
          // );
          // var auth = await firebase.auth().signInWithCredential(credential);
          // var tokenResult = await auth.user.getIdTokenResult(true);
          // // 最终结果
          // let rstidToken = tokenResult.token;
          // console.log("firebase信息", tokenResult, "firebasetoken", rstidToken);
        })
        .catch(function(error) {
          console.log("googleerror:", error);
        });
    },

   appleLogin() {
      let that = this;
      var provider = new firebase.auth.OAuthProvider("apple.com");
      provider.addScope("email");
      provider.addScope("name");
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(function(result) {
          const userInfo = {
            identity_token: result.credential.idToken,
            client_user: result.additionalUserInfo.profile.sub,
            user_nick: result.user.displayName ? result.user.displayName : null,
          };
          that.$store
            .dispatch("user/applein", userInfo)
            .then(() => {
              that.$store.dispatch("user/hasnew");
              that.dialog = false;
            })
            .catch(() => {
              console.log("error submit!!");
            });
          console.log(result);
        })
        .catch(function(error) {
          console.log("appleerror", error);
        });
    },

twitterlogin() {
      let that = this;
      var provider = new firebase.auth.TwitterAuthProvider();
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(function(result) {
          // For accessing the Twitter API.
          // var token = result.credential.accessToken;
          // var secret = result.credential.secret;
          // // The signed-in user info.
          // var user = result.user;
          console.log(result);
          var token = result.credential.accessToken;
          var secret = result.credential.secret;
          var user_id = result.additionalUserInfo.profile.id_str;
          var screen_name = result.additionalUserInfo.profile.screen_name;
          const userInfo = {
            oauth_token: token,
            oauth_token_secret: secret,
            user_id: user_id,
            screen_name: screen_name,
          };
          that.$store
            .dispatch("user/twitterin", userInfo)
            .then(() => {
              that.$store.dispatch("user/hasnew");
              that.dialog = false;
            })
            .catch(() => {
              console.log("error submit!!");
            });
        })
        .catch((error) => {
          console.log("twittererror:" + error);
        });
    },

well done!