Skip to content
airdb.wiki

DEV1001 - Sign in with Google

DEV1001 - Sign in with Google

IDDEV1001
CategoryAuthorization
NameSign in with Google
Instructor-
Length0.5 Hours
LevelIntroductory

Introduction

Develop a google sign in components.

Knowledge Points

Prerequisites

  • Instance nodejs 8: curl -sL https://deb.nodesource.com/setup_8.x | bash -
  • Install vue 3: yarn global add @vue/cli

Target Audience

Slides

Reference

Video

Content

Step 1: Apply google api client id

Press CONFIGURE A PROJECT button to create a api for you website. And remember client_id YOUR_CLIENT_ID.apps.googleusercontent.com

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.

public/index.html
<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.

src/main.js
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)

c. Develop your login component.

src/components/HelloWorld.vue
<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

vue.config.js
module.exports = {
    devServer: {
        host: '0.0.0.0',
        hot: true,
        disableHostCheck: true,
    },
}
.eslintrc.js
module.exports = {
    rules: {
        'no-console': 'off',
    },
}

Snapshort images