LEARN HOW YOU INTEGRATE "GOOGLE LOGIN" INTO YOUR WEBSITE.

LEARN HOW YOU INTEGRATE "GOOGLE LOGIN" INTO YOUR WEBSITE.

By Kavi | Kavya | 15 Apr 2020


Hi everyone , i will show you about log in through google account into your own website by visitors .

let's learn it by step by step.

1. firstly go to CONSOL.DEVELOPERS .GOOGLE.COM and log in There with your own google account.

link is here : https://console.developers.google.com/

you can see , i already logged in .

3143414223-f431fc99df6b7333256a1f5b254be2270b083fc88700889c443e9aaee5b254ea.png

 

2. now, create a new project by just following me .just to inform you that i am here using my LOCALHOST AND PRE-CODED FILE FOR THIS Tutorial blogging .3143414223-94020c1e5b112b375c3deb3c1882e650d0fbd18c9c4990e3df9afaa89fbea830.png

 

3. just reminder, you can also download the file(google login APi zip file) which i put the link here https://www.skill2up.in/learning-hub

4. now unzip the file and copy this folder to your localhost root folder .

5. now open your"phpMyAdmin" software and create a database .

3143414223-32086971d29488a4794e2044ead06e92ca4fcefd2e1b1bb0f799f6ed6be9d0bb.png

 

3143414223-f75e288d9544e3007d2ecca944866d67fc9c6a58b7693734bc301be17ce2f6e4.png

 

if you don't have phpMyAdmin software then you can install from here  https://www.skill2up.in/event-details/phpmyadmin

3143414223-f69e2a7168439674af2b7d1199c00e4d955ae36d23d7452d82765a9aa4f2f4a3.png

 

3143414223-dd52f6ff1beba69e18779c9db23dbe71ba95b1f27fe14ef02c254b0fd1055bd0.png

6. now select "import" then you just need to import SQL file from folder.

7. now we have table named "Users" where all user information will be stored .

3143414223-8172ecdbcbf568162c5b6541dda2ce7bc5d0c5a70c481c50b2093280906b9f5e.png

 

8.now its time to proceed to your root folder and do some editing with some code.

3143414223-3b4b0502f66f200eff118e7f11981201d2a31f26633831942ec1e86d5d0b802b.png

only we need to edit red circle area in screenshot ,just edit username, database .

9. after all , go back to google API console and need to get client id and client secret id.

 

3143414223-854ab323ce2fdebde5777d1309e4b67b2d4f14ccfead3edb6523e9f37bdb9c56.png

 

3143414223-3a2446d1ac590cf1960e1e37222f75b704417bbd3b3f01e5658d0e539e347c52.png

3143414223-5670374e7defae8eb4be4057071290c2579cbee01d22f61a5fae74f4abcb616a.png

3143414223-36fc0237bbc86b97ff8d6ae6c467e45ffbb4cc1a0aa35c952fa5e3dfb513cf9a.png

 

10. after this, go back to google API console and get client id and client secret id then enable google+ API which already been enabled here.

3143414223-5c39402322b3aca66d465a39326618ab8dadc5e7c2fc3801dea6b48e95ed7463.png

 

3143414223-6159d3a877e19c308c4f5490792e8c77d60b2cc87889194de8e76fa4b91bbc91.png

 

 

11. now, we have client id and client secret id ,so copy both and paste it in our index file.

3143414223-c3bcd01444e0db3d29c0cdcbe41338ca45d02edde4ee52a449a086be6dd21e7f.png

3143414223-291243aca3a6c63c93af2b7cb5dd920ffb3cf43c83b4319bf92a476a081a7566.png

 

12. As you can see, we have successfully integrated google API to our website (all the user information will be saved in users table inside database)

3143414223-bcb50869f97a504ed2fab8fcaf8ac9a23233a3db2eaa36db5794fe2766b30c01.png

3143414223-24fbdc9c3224ed957be479298e6805164f5863cd84aca7c99586f577efddeb92.png

3143414223-9e9ac234e1fd44135695936fa0aaea3c5ea70418e40c837117d7d97b118db02e.png

 

Thank you for learning , please tip this blog and follow for great contents.

Resources:

https://www.skill2up.in/event-details/phpmyadmin 

https://console.developers.google.com/

https://www.skill2up.in/event-details/google_login_api_hrwndr-zip-1

 

 

 

How do you rate this article?

3


Kavi
Kavi

Chief mentor of 'skill2up.in' and blogging is my passion.


Kavya
Kavya

Hello everyone i am kavya and i love to travel and writing essay, reports and blog.

Publish0x

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.