Skip to main content

Google Sign-in using OAuth with PHP CodeIgniter 3 & JQuery

Pre-requisites:

  1. Setup project info in Google API Console. If you dont have any projects, add a new one.
  2. Make sure your OAuth Consent Screen have been configured correctly. If not, then now is the right time. 
    1. Choose user type 'External' and click Create.
    2. Fill up your project's details. Make sure to use your real project name.
    3. You will need to insert a link for your application's terms of service & privacy policy. Fortunately, you can just use google drive links for these files.
    4. Unless you know what you're doing, only select these scope.
    5. Add test users. 
    6. Review your changes and go back to the dashboard.
  3. Click Create credentials > OAuth client ID.
  4. Select Web application to create a new client ID.
  5. Add your server URLs in Authorized JavaScript origins or it wont work. In my case, adding localhost does nothing and I needed to test my project on the server with working URL instead.
  6. Go back to the Credentials menu. Click copy client id on the OAuth 2.0 Client IDs table.

Front-end Code:

  • Make sure to load the required library
<script src="https://accounts.google.com/gsi/client" async defer></script>

  • Then insert the button wherever you need it. Make sure to replace DATA_CLIENT_ID with the client id you copied earlier.

<div id="g_id_onload" data-client_id="{DATA_CLIENT_ID}" data-callback="onSignIn"></div>
<div class="g_id_signin" data-type="standard"></div>

  • The attribute data-callback="onSignIn" is referring to my javascript function I've set below. You can replace it with your own function.
 

Back-end Code:

  • Basically the onSignIn function have already received the response we need from Google. The back-end function just needs to process it into manageable array form before we insert/update it into our database. 
  • You can see below that I have split the response ($credential) into three variables. The one we need is the payload that contains the user's data. Since the data is encoded in base64 form, I made sure  to decode it and turn the json string into an object first. 
  • After this function return its values back to onSignIn function, it will redirect the user to the login page. In this page, we actually check for the session's google_signin value and set the user as logged in without needing for passwords.
The codes provided in this post are purely for learning purposes. You may enhance it to your likings.

References:











Labels:

Comments

Post a Comment

Popular posts from this blog

Setup existing IONIC project in local

Setup existing IONIC project in local  Steps: clone git repo install ionic -  npm install -g @ionic/cli masuk folder repo project install npm dependencies -  npm install run ionic project -  ionic serve buka android studio / xcode -  ionic cap open $var  - $var = ‘android’ atau ‘ios’. ada dua je option, replace $var dgn dua option tu sync changes vscode & dkt android studio / xcode -  ionic cap sync good luck Common issues: dependency conflict check https://www.npmpeer.dev/ utk tengok version yg compatible try naikkan/turunkan version dependency yg keluar dkt error. tembak je sampai hilang error g radle issue try upgrade gradle. kalau tak boleh, try remove folder android & build semula e rror cocoapod make sure install xcode make sure install cocoapod error java  home not found utk mac, buka ~/.zshrc & masukkan chang es dkt VSC tak masuk android studio / xcode try ionic cap sync try quit & buka semula cordo va.variables.gradle no...
Post a Comment
Read more

🗑️ Clear storage Mac OS

  🗑️ Clear storage Mac OS 1: Clear system cache: Go to Finder > Go > Go to Folder, then type in "~/Library/Caches" and hit enter. Select all the folders inside the Caches folder and delete them. 2: Clear system logs: Go to Finder > Go > Go to Folder, then type in "/var/log" and hit enter. Select all the files inside the Log folder and delete them. 3: Remove unused language files: Go to Finder > Go > Go to Folder, then type in "/Library/Languages" and hit enter. Delete all the language folders you don't need. 4: Uninstall unused apps: Go to the Applications folder and delete the apps you don't use. 5: Clean up system files: Use a system cleaning tool like CleanMyMac X to scan and remove unnecessary system files. 6: If you have npm installed, clear the caches once in a while with ‘sudo npm cache clean --force’ 7: If you have ionic projects, open the ‘.angular’ folder and delete the ‘cache’ folder inside it.
Post a Comment
Read more

🪄 Useful git spells

Navigating the world of Git can be akin to mastering an arcane art. For the savvy developer, knowing the right incantations can mean the difference between seamless collaboration and catastrophic code conflicts. Here's a compendium of Git commands that are essential for those critical moments. Handle them with care, for they wield great power. Reverting to a Specific Commit (Non-Shared Branches Only) When you need to undo changes and return to a known good state: `git reset --hard <commit-hash>` - This will reset your branch to the specified commit. `git push -f origin` - Force push the changes to overwrite the remote branch. Merging Branches Like a Pro To incorporate changes from one branch into another, follow these steps: `git checkout <branch-to-merge-to>` - Switch to the branch you want to update. `git fetch origin` - Fetch the latest changes from the remote. `git pull` - Pull the latest changes into your local branch. `git status` - Check the status of your branch...
Post a Comment
Read more