DEV1000 - Sign in with Google

此内容尚不支持你的语言。

ID	DEV1000
Category	Basic develpment skills
Name	How to use Github
Instructor	-
Length	0.5 Hours
Level	Introductory

Introduction

Github

Knowledge Points

git

Prerequisites

Basic computer skills

Target Audience

developer, devops, ops, sre

Slides

Reference

Integrating Google Sign-In into your web app

Video

Content

Step 1: Apply google api client id

Step 2: Create a vue project

npx @vue/cli create my-project
yarm add vue-google-signin-button

Step 3: Develop your code

a. Import google api & fonts in your project.

<script src="https://apis.google.com/js/platform.js" async defer></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">

b. Import npm package and use it.

import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)

c. Develop your login component.

<template>
  <div class="hello">

    <g-signin-button
      :params="googleSignInParams"
      @success="onSignInSuccess"
      @error="onSignInError">
      <div id="customBtn" class="customGPlusSignIn">
        <span class="icon"></span>
        <span class="buttonText">Sign in with Google</span>
      </div>
    </g-signin-button>

    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  components: {
  },
  data() {
    return {
        googleSignInParams: {
          client_id: "694352218094-5dab76j4be6vqrim5hsf1m526me65g0g.apps.googleusercontent.com"
        }
    }
  },
  props: {
    msg: String
  },
  methods: {
    onSignInSuccess (googleUser) {
      console.log(googleUser);
      var profile = googleUser.getBasicProfile()
      console.log("ID: " + profile.getId())
      console.log("Image URL: " + profile.getImageUrl())
      console.log("Email: " + profile.getEmail())
    },
    onSignInError (error) {
      console.log('OH NOES', error)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #customBtn {
      display: inline-block;
      background: white;
      color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.icon {
      background: url('https://www.google.com/favicon.ico') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }
</style>

Step 4: Check synatx and bind your localhost as your domain

module.exports = {
    devServer: {
        host: '0.0.0.0',
        hot: true,
        disableHostCheck: true,
    },
}

module.exports = {
    rules: {
        'no-console': 'off',
    },
}

DEV1000 - Sign in with Google

Introduction

Knowledge Points

Prerequisites

Target Audience

Slides

Reference

Video

Content

Step 1: Apply google api client id

Step 2: Create a vue project

Step 3: Develop your code

Step 4: Check synatx and bind your localhost as your domain

Snapshort images