javascript - Error getting verification code from Microsoft with Firebase and Azure - Stack Overflow

admin管理员组

文章数量:1313121

As a newbie to web development I'm trying to achieve the following in our Vue.js web app:

• Sign in users with their active directory credentials
• Use the Firebase Realtime Database to store data and see in the "Authentication" section in the Firebase console who logged on and when

To get this to work I followed the Firebase docs:

Install Firebase in the project and add the "Microsoft" "Sign in method" with the correct "Client ID" and "Client Secret" to the Firebase console.

Client ID:

Client secret:

Firebase console "Authentication"

In Azure App Registration we also added the "Redirect URI" as advised by Firebase:

In our project we created a "firebase.js" file:

import * as firebase from "firebase/app"
import "firebase/auth"

var firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID
}


let firebaseApp = firebase.initializeApp(firebaseConfig)
let provider = new firebase.auth.OAuthProvider('microsoft');

export { firebaseApp, provider }

And a Vue ponent with only 2 buttons:

<template>
  <q-page padding>
    <h3>Home</h3>
    <p>Access token: {{ OAuthAccessToken }}</p>
    <p>User details: {{ user }}</p>
    <div>
      <q-btn color="primary" @click="login"> Login </q-btn>
      <q-btn color="primary" @click="logout" class="q-ml-xl"> Logout </q-btn>
    </div>
  </q-page>
</template>

<script>
import { firebaseApp, provider } from "boot/firebase";

export default {
  name: "PageHome",
  data() {
    return {
      OAuthAccessToken: ""
    };
  },
  puted: {
    user() {
      // return 'test user'
      let test = firebaseApp.auth().currentUser;
      console.log("user ", test);
      return test;
    }
  },
  methods: {
    login() {
      firebaseApp.auth().signInWithRedirect(provider)
    },
    logout() {
      firebaseApp
        .auth()
        .signOut()
        .then(function() {
          console.log("logout succes");
        })
        .catch(function(error) {
          console.log("logout fail");
        });
    }
  },
  ponents: {},
  mounted() {
    firebaseApp
      .auth()
      .getRedirectResult()
      .then(function(result) {
        if (result.credential.accessToken) {
          this.OAuthAccessToken = result.credential.accessToken;
          console.log("token ", result.credential.accessToken);
        }
      })
      .catch(function(error) {
        console.log("fail ", error);
      });
  }
};
</script>

When clicking the login button we are correctly redirected to the Microsoft sign in page, and we can sign in correctly with our AD credentials. After that we're also correctly redirected back to the app. So that part works fine. However, The following error is displayed in the console:

We tried generating a new secret in the "Azure App Registration" and use that but the issue remains. Are we missing something super obvious here?

Thank you for your help.

As a newbie to web development I'm trying to achieve the following in our Vue.js web app:

• Sign in users with their active directory credentials
• Use the Firebase Realtime Database to store data and see in the "Authentication" section in the Firebase console who logged on and when

To get this to work I followed the Firebase docs:

Install Firebase in the project and add the "Microsoft" "Sign in method" with the correct "Client ID" and "Client Secret" to the Firebase console.

Client ID:

Client secret:

Firebase console "Authentication"

In Azure App Registration we also added the "Redirect URI" as advised by Firebase:

In our project we created a "firebase.js" file:

import * as firebase from "firebase/app"
import "firebase/auth"

var firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID
}


let firebaseApp = firebase.initializeApp(firebaseConfig)
let provider = new firebase.auth.OAuthProvider('microsoft.');

export { firebaseApp, provider }

And a Vue ponent with only 2 buttons:

<template>
  <q-page padding>
    <h3>Home</h3>
    <p>Access token: {{ OAuthAccessToken }}</p>
    <p>User details: {{ user }}</p>
    <div>
      <q-btn color="primary" @click="login"> Login </q-btn>
      <q-btn color="primary" @click="logout" class="q-ml-xl"> Logout </q-btn>
    </div>
  </q-page>
</template>

<script>
import { firebaseApp, provider } from "boot/firebase";

export default {
  name: "PageHome",
  data() {
    return {
      OAuthAccessToken: ""
    };
  },
  puted: {
    user() {
      // return 'test user'
      let test = firebaseApp.auth().currentUser;
      console.log("user ", test);
      return test;
    }
  },
  methods: {
    login() {
      firebaseApp.auth().signInWithRedirect(provider)
    },
    logout() {
      firebaseApp
        .auth()
        .signOut()
        .then(function() {
          console.log("logout succes");
        })
        .catch(function(error) {
          console.log("logout fail");
        });
    }
  },
  ponents: {},
  mounted() {
    firebaseApp
      .auth()
      .getRedirectResult()
      .then(function(result) {
        if (result.credential.accessToken) {
          this.OAuthAccessToken = result.credential.accessToken;
          console.log("token ", result.credential.accessToken);
        }
      })
      .catch(function(error) {
        console.log("fail ", error);
      });
  }
};
</script>

When clicking the login button we are correctly redirected to the Microsoft sign in page, and we can sign in correctly with our AD credentials. After that we're also correctly redirected back to the app. So that part works fine. However, The following error is displayed in the console:

We tried generating a new secret in the "Azure App Registration" and use that but the issue remains. Are we missing something super obvious here?

Thank you for your help.

• javascript
• firebase
• azure
• firebase-authentication
• azure-active-directory

Share Improve this question Follow edited Apr 20, 2020 at 13:59 DarkLite1 asked Apr 20, 2020 at 13:46 DarkLite1DarkLite1 14.8k4646 gold badges136136 silver badges234234 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

let provider = new firebase.auth.OAuthProvider('microsoft.');
provider.setCustomParameters({
  prompt: "consent",
  tenant: "the tenant id provided by outlook",
})

This will force the user to select the account to sign in has, and then enter their password. You can find the tenant [Directory (tenant) ID] the same place you got the client ID. Hope this helps, Because I legit had the same problem and found the solution by trying a couple things.

本文标签： javascriptError getting verification code from Microsoft with Firebase and AzureStack Overflow