How to realize Google third Party Login by Vue
This article mainly introduces Vue how to achieve Google third-party login related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this Vue how to achieve Google third-party login article will have a harvest, let's take a look.
I. developer platform configuration
1. To enter the developer platform, first go to the Google API console to select or create a project
Google developer platform
A dazzling pile of API leaves you no choice, but you just have to remember that the purpose of this visit is: social API
two。 There is one more thing to do before using this API, and that is to apply for an OAuth 2.0 client ID
3 fill in the type, name and source url of your project as required
Note: after the creation is completed, there is also a pop-up window on the page showing the key of the client ID you applied for. Yes, this is a process of generation.
4. Install vue-google-signin-button
Npm install vue-google-signin-button-save
5. Introduce and register in main.js
Import GSignInButton from "vue-google-signin-button" Vue.use (GSignInButton)
6.index.html introduces js file
7. Use components in login.vue
Sign in with Google export default {data () {return {/ * The Auth2 parameters, as seen on * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams. * As the very least, a valid client_id must present. * @ type {Object} * / googleSignInParams: {client_id: "YOUR_APP_CLIENT_ID.apps.googleusercontent.com"}}, methods: {onSignInSuccess (googleUser) {console.log (googleUser) const profile = googleUser.getBasicProfile () console.log (profile)}, onSignInError (error) {console.log ("OH NOES") Error)}} .g-signin-button {/ * This is where you control how the button looks. Be creative! * / display: inline-block; padding: 4px 8px; border-radius: 3px; background-color: # 3c82f7; color: # fff; box-shadow: 0 3px 0 # 0f69ff;}
Solve the problem BUG
1. Problem 1: js is not introduced into initialization.
You will find that an error appears on the page during initialization.
The reason for this problem is that the plug-in itself did not introduce the Google.js file. The solution is to introduce it into Vue's index.html, as shown in the figure below.
This is the end of the article on "how Vue implements Google third-party login". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve Google third-party login in Vue". If you want to learn more knowledge, welcome to follow the industry information channel.
