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 #
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.
<!-- 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 #
