Firebase Auth - ConfirmPasswordReset，如何从 URL 中获取 oobcode 以通过函数？答案

【问题标题】：Firebase Auth - ConfirmPasswordReset, how to grab oobcode from URL to pass thorugh function?Firebase Auth - ConfirmPasswordReset，如何从 URL 中获取 oobcode 以通过函数？
【发布时间】：2020-03-08 09:08:25
【问题描述】：

我正在尝试使用 Firebase 身份验证在我的网站上实现重置密码页面。我收到了重置密码页面的发送电子邮件。现在据我了解，您会收到一封电子邮件，其中包含您需要单击的链接，并且在此电子邮件中将有一个重置密码所需的代码。现在我不知道如何从 url 中获取所述代码并已经在现场为用户显示它。是否可以让代码出现在电子邮件正文中并让用户输入代码？如果没有，我如何从 url 中获取代码并为用户输入，以便用户只能输入密码？我的网站正在使用 vue，这就是我目前所拥有的

<template>
  <div class="container">
    <h3>reset pw page</h3>
    <div class="row">
      <form @submit.prevent="ResetPw()" class="col s12">
        <div class="row">
          <div class="input-field col s12">
            <input type="password" id="password" v-model="password" />
            <label>Password</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input type="text" id="code" v-model="code" />
            <label>Code</label>
          </div>
        </div>
        <button type="submit" class="btn">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
import firebase from "firebase/app";
export default {
  data() {
    return {
      password: "",
      code: ""
    };
  },
  methods: {
    ResetPw() {
      firebase
        .auth()
        .confirmPasswordReset(this.code, this.password)
        .then(() => {
          console.log(`Password Changed!`);
        })
        .catch(err => console.log(err));
    }
  }
};
</script>

我想我已经完成了一切，我只需要了解如何从链接 https://my-project.firebaseapp.com/__/auth/action?mode=&oobCode=

中获取 oobcode

【问题讨论】：

标签： firebase firebase-authentication

【解决方案1】：

不知道如何从邮件正文中获取oobCode，但是在页面加载后从URL中获取代码，您可以参考这个问题：how-can-i-get-query-string-values-in-javascript。在您的表单中，为具有空字符串值的代码创建一个隐藏输入。窗口加载后，将从 URL 中获取代码，然后您可以将代码和密码传递给函数

<body>
  <form>
    <input type="text" id='newPass' name='newPass' placeholder='New password'>
    <input type="hidden" id='code' name='code' value="">
    <button type='submit'>Submit</button>
  </form>
</body>

<script>
$(window).load(function () {
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    var code = getParameterByName('oobCode')
    document.getElementById('code').value = code;
</script>

希望这会有所帮助！

【讨论】：

【解决方案2】：

如果你使用 react-router，它不再解析查询，但你可以通过 location.search 访问它

const params = new URLSearchParams(this.props.location.search);
const code = params.get('oobCode')
const email = await firebase.auth().verifyPasswordResetCode(code)

或者，您可以不使用 this.props.location.search，而是使用 new URLSearchParams(window.location.pathname)

【讨论】：