Integrating Discord Signin in PHP website

 Discord is one of the top gaming social networking site available now. For some sites, it is required to integrate Discord Signin . So am explaining in this post how to do the same.

1) Create an App in Discord Developers Area

Visit: https://discord.com/developers/ by login and create an app.

Click on link New Application.

2. Credentials Update

In this screen, they will ask you for name of app, description,logo.etc.. Also you have to give the endpoint website URL, terms link,services link.etc... Also you will get the Application ID and secret from this screen. Copy it and keep it as we are using it in our script.

3)Creating OAuth Id's

Here they will ask you to provide the redirect URL after login with discord. Also you have to select the scopes which u needed after login in. The discord API will pass you all the required parameters based on the scope.

5)Configure BOT

Here add bot and you will get a token.Save it for our App.

6) Download Integrating Script from Github.

You have to download the following github code  in my repo. https://github.com/litto/Discord-Signin

Now based on this script I am explaining what to configure and how to achieve it..

5)Updating Credentials in the Script.

In the root folder, you can find the config file which you need to edit and update your credentials.Its code will be like this:-

<?php

# CLIENT ID

# https://i.imgur.com/GHI2ts5.png (screenshot)

$client_id = "#CLIENTID";

# CLIENT SECRET

# https://i.imgur.com/r5dYANR.png (screenshot)

$secret_id = "#SECRETID";

# SCOPES SEPARATED BY SPACE

# example: identify email guilds connections  

$scopes = "email";

# REDIRECT URL

# example: https://mydomain.com/includes/login.php

# example: https://mydomain.com/test/includes/login.php

$redirect_url = "http://sitename.com/login.php";

# IMPORTANT READ THIS:

# - Set the `$bot_token` to your bot token if you want to use guilds.join scope to add a member to your server

# - Check login.php for more detailed info on this.

# - Leave it as it is if you do not want to use 'guilds.join' scope.

# https://i.imgur.com/2tlOI4t.png (screenshot)

$bot_token = "#BOTTOKEN";

Update all the keys, scopes which we already configured in the Discord developer screen.

6) Now place includes folder in the root of your application. Set redirect URL to the login script in the includes folder.

7) Now run the index file, after signing you can see the details fetched from discord app.These details you can use according to your convinience.

Setting Up Google OAuth Content Screen For Creating API Credentials

 Google will only allow you to create API credentials only after setting up OAuth content screen. This is necessary for creating Google signing also. So Iam explaining here how to do that step by step.

1) Click on Configure Consent Screen

2) Selecting the  Usertype 

3)Giving App Information

Give Appname,Support Email and Applogo.

You have to give application home page url, privacy policy url and terms conditions URL.

Add the authorised domains for using this app. Also fill up the developer email address .Then click on Save and Continue.

4) Define Scopes of the App

Click on Add Scope link

Here select checkboxes for email and profile. For this permission, you no need of any approval from the google. Click Continue.

5) Define Test Users

Here you can add all gmail users who can test this app. you can add around 100 users for this.

Then click on continue.

6) Summary Screen

This is the last stage where summary of your app will be shown. This means your process completed successfully.. Now you can create API credentials for the apps.

Updated Integrating Google Signin with PHP websites

 In modern sites, it's inevitable to have a login system by using social media. This is basically to keep away spammers mostly and verify their profiles from top sites so we will get maximum verified information from them . Most sites will remove the manual registration or sign-in procedures from their sites and go for Social media logins. So programmers be alert. Now in this post am explaining about how to integrate Google signing for your website. Considering other socialmedia integrations, google authentication is quite easy and straight forward. Iam going to explain step by step on how to do this in this post:-

1) Create authorization credentials

The most important thing is to create authentication credentials in Google for whatever api's we are using from then.Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project. So for creating that :-

a) Go to the Credentials page.

Sometimes we have to configure OAuth content screen for creating credentials. You can find more here in my previous post.

https://phpdudes.blogspot.com/2021/06/setting-up-google-oauth-content-screen.html

b) Click Create credentials > OAuth client ID.

c) Select the Web application application type.

d) Name your OAuth 2.0 client and click Create

Here you have to enter web application name,then authorised domain URL and the URL where request will come. Please make sure that the redirect URL will be the link after signing, customer will be redirected to.

e) After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)

Please take note of the client id you get from here, as we have to put same in one place of our script.

2) Putting JS scripts in the header of the script

 <meta name="google-signin-scope" content="profile email">

    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID_COPIED">

    <script src="https://apis.google.com/js/platform.js" async defer></script>

Include this script over the body of your script page. Replace YOUR_CLIENT_ID_COPIED with the google API key u created.

3)Putting Google signing display button in your page

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark">

Put above code in the place you want the signin button to appear. It will display like this:-

4) Putting Javascript code in the page

Put following javascript code snippet code at end of the page.

<script>

      function onSignIn(googleUser) {

        // Useful data for your client-side scripts:

        var profile = googleUser.getBasicProfile();

        console.log("ID: " + profile.getId()); // Don't send this directly to your server!

        console.log('Full Name: ' + profile.getName());

        console.log('Given Name: ' + profile.getGivenName());

        console.log('Family Name: ' + profile.getFamilyName());

        console.log("Image URL: " + profile.getImageUrl());

        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:

        var id_token = googleUser.getAuthResponse().id_token;

        console.log("ID Token: " + id_token);

        var id = profile.getId();

        var name = profile.getName();

        var email = profile.getEmail();

        var token= id_token;

        window.location.href = "googleaccess.php?id="+id+"&name="+name+"&email="+email+"&token="+token;

      };

    </script>

5)Create a Google Details Accessing Page

You have to create a page called googleaccess.php to catch all these values ina PHP page. These details you can use for checking the login and registering according to your websites logic.

          $email=$_GET['email'];

          $name=$_GET['name'];

          $token=$_GET['token'];

You can do like this:- You check whether the email exist in your database associated with a user. If yes activate his session and log him in. If his email is not available, then you create account of him by inserting name, email.etc. This is the basic login and register you can do using the Google signin.

You can download sample code from here:- https://github.com/litto/GoogleSignin