用户使用 Firebase 身份验证登录后如何重定向? [英] How to redirect after a user signs in with Firebase authentication?

问题描述

如何在用户登录后重定向到不同的网页?

目前，当用户登录时，会检索数据，但不会将用户重定向到其他网站.

我知道我应该使用getRedirectResult"，但有人可以告诉我如何使用它以及如何将用户重定向到不同的网页，维护检索到的用户数据.

我的 JavaScript 工作:

function toggleSignIn() {如果 (!firebase.auth().currentUser) {//[开始创建提供者]var provider = new firebase.auth.GoogleAuthProvider();//[结束创建提供者]//[开始添加范围]provider.addScope('https://www.googleapis.com/auth/plus.login');//[END addscopes]//[开始登录]firebase.auth().signInWithPopup(provider).then(function(result) {//这会为您提供一个 Google 访问令牌.您可以使用它来访问 Google API.var token = result.credential.accessToken;//登录用户信息.var user = result.user;//[START_EXCLUDE]document.getElementById('quickstart-oauthtoken').textContent = token;//[END_EXCLUDE]}).catch(函数(错误){//在这里处理错误.var errorCode = error.code;var errorMessage = error.message;//使用的用户帐户的电子邮件.var email = error.email;//使用的 firebase.auth.AuthCredential 类型.var credential = error.credential;//[START_EXCLUDE]if (errorCode === 'auth/account-exists-with-different-credential') {alert("您已经为该电子邮件注册了不同的身份验证提供商.");//如果您在应用程序上使用多个身份验证提供程序，则应处理链接//这里是用户的帐户.}否则如果(错误代码 === 'auth/auth-domain-config-required'){alert("需要授权域配置");}else if (errorCode === 'auth/cancelled-popup-request') {alert("弹出的谷歌登录被取消");}else if (errorCode === 'auth/operation-not-allowed') {alert("不允许操作");}else if (errorCode === 'auth/operation-not-supported-in-this-environment') {alert("此环境不支持操作");}else if (errorCode === 'auth/popup-blocked') {alert("登录弹出窗口被屏蔽了");}else if (errorCode === 'auth/popup-closed-by-user') {alert("谷歌登录弹出窗口被取消");}else if (errorCode === 'auth/unauthorized-domain') {alert("未授权域名");}别的 {控制台错误(错误)；}//[END_EXCLUDE]});//[结束登录]} 别的 {//[开始退出]firebase.auth().signOut();//[结束退出]}//[START_EXCLUDE]document.getElementById('quickstart-sign-ing').disabled = false;//[END_EXCLUDE]}

解决方案

您只需要在 initApp() 中添加两个重定向即可实现此目的.我指的是快速入门 git repo https://github.com/firebase/quickstart-js/blob/master/auth/email.html，因为我是通过重复问题 Firebase 登录后重定向到页面 - Javascript

1) 在第 163 行，添加您希望登录用户重定向到的页面:

162//用户已登录.第163话第164话

2) 在第 180 行(由于上面的添加，现在是 181)，添加一个返回登录页面的重定向:

180//用户已注销.第181话第182话

您需要将整个脚本添加到索引和登录页面中 - 因此原始 git 存储库中第 37 行和第 201 行之间的所有内容(包括脚本标记)(但上面添加了两个重定向).

现在，如果您尝试在未登录的情况下直接进入loggedIn.html，initApp 函数将检查您是否已登录，查看是否未登录，并将您重定向到登录页面.

唯一的问题是您在重定向之前会快速浏览记录的内容，因此要解决此问题，您可以将此页面的正文设置为隐藏，并在用户登录时运行脚本删除隐藏的类.

最后，您需要在 toggleSignIn 函数中添加重定向，位于原始存储库的第 46 行:

45 firebase.auth().signOut();46 window.location = ‘index.html’;47//[结束退出]

How can I redirect to a different webpage after the user has signed in?

Currently when a user logs in, data gets retrieved however, it doesn't redirect the user to a different website.

I know I should use 'getRedirectResult', but can someone show me how to use it and how it redirect the user to a different webpage, maintaining the retrieved user data.

My javascript work:

function toggleSignIn() {
  if (!firebase.auth().currentUser) {
    // [START createprovider]
    var provider = new firebase.auth.GoogleAuthProvider();
    // [END createprovider]
    // [START addscopes]
    provider.addScope('https://www.googleapis.com/auth/plus.login');
    // [END addscopes]
    // [START signin]
    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Google Access Token. You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // [START_EXCLUDE]
      document.getElementById('quickstart-oauthtoken').textContent = token;
      // [END_EXCLUDE]
    }).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; 
      // [START_EXCLUDE]
      if (errorCode === 'auth/account-exists-with-different-credential') {
        alert("You have already signed up with a different auth provider for that email.");
        // If you are using multiple auth providers on your app you should handle linking
        // the user's accounts here.
      }
  else if (errorCode === 'auth/auth-domain-config-required') {
    alert("An auth domain configuration is required"); 
      }
      else if (errorCode === 'auth/cancelled-popup-request') {
          alert("Popup Google sign in was canceled");
      }
      else if (errorCode === 'auth/operation-not-allowed') {
          alert("Operation is not allowed");
      }
      else if (errorCode === 'auth/operation-not-supported-in-this-environment') {
          alert("Operation is not supported in this environment");
      }
      else if (errorCode === 'auth/popup-blocked') {
          alert("Sign in popup got blocked");
      }
      else if (errorCode === 'auth/popup-closed-by-user') {
          alert("Google sign in popup got cancelled");
      }
      else if (errorCode === 'auth/unauthorized-domain') {
          alert("Unauthorized domain");
      }
       else {
        console.error(error);
      }
      // [END_EXCLUDE]
    });
    // [END signin]
  } else {
    // [START signout]
    firebase.auth().signOut();
    // [END signout]
  }
  // [START_EXCLUDE]
  document.getElementById('quickstart-sign-ing').disabled = false;
  // [END_EXCLUDE]
}

解决方案

You just need to add two redirects inside initApp() to make this happen. I’m referring to the quickstart git repo https://github.com/firebase/quickstart-js/blob/master/auth/email.html, as I came here via the duplicate question Redirecting to a page after Firebase login - Javascript

1) on line 163, add the page you want logged-in users to be redirected to:

162 //User is signed in.
163 window.location = ‘loggedIn.html’;
164 var displayName = user.displayName;

2) on line 180 (now 181 because of the add above), add a redirect back to the login page:

180 // User is signed out.
181 window.location = ‘index.html’;
182 // [START_EXLUDE]

You need to add the entire script to both the index and the logged in pages - so everything (including the script tags) between lines 37 and 201 from the original git repo (but with the two redirect additions above).

Now, if you try to go directly to loggedIn.html without logging in, the initApp function will check if you are logged in, see that you aren’t, and redirect you to the login page.

The only issue is you get a quick flash of the logged content before the redirect, so to get around this you could set the body of this page to be hidden, and have a script that runs if the user is logged in that removes the hidden class.

Lastly, you’ll want to add a redirect inside the toggleSignIn function, on line 46 of the original repo:

45  firebase.auth().signOut();
46  window.location = ‘index.html’;
47  // [END signout]

这篇关于用户使用 Firebase 身份验证登录后如何重定向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！