Lädt...


🔧 Obtaining a Google OAuth Client ID


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

What is a Client ID?
A Google Client ID (or ClientID) is a unique identifier that is assigned to an application/user. It is used to authenticate clients and servers using OAuth (Auth 2.0).

To get a Google Client ID, open the Google Cloud Console, and start a new project. For this tutorial, we'll name the project "GoogleReact Sign-In," but you can choose any name you prefer.

Image description

After creating the project, navigate to the Credentials section in the API and Services menu. Here, you will find a dashboard where your current project name should be visible in the top-left corner, close to the Google Cloud logo.

Image description

Now, before you create your credentials, let's go over to the OAuth consent screen to set up the consent screen.

Set up a Google Sign-In Consent Screen.

The consent screen, as the name implies, is a page that requires the user to log in via an external or third party library. This popup informs the user that they are leaving your app's root page and granting access to a third-party page. example of a Google Sign-In consent screen shown below

Image description

Simply put, when you utilize OAuth 2.0 for authorization, your app asks the user to authorize one or more scopes of access using their Google account. Scopes of access include any information or activities that your app is authorized to access or do on the user's account.

To set up the Google consent page for your React app, navigate to the "OAuth consent screen" tab on the left-hand menu of your Google Cloud Console.

Once in this tab, select “external” the only option allowed unless you are using a Google-verified company or application, then click the “Create” button to generate your consent screen.

Image description

Next, under the same page, Provide a name for your application and an email address to receive updates on the status of the project.

You can leave the remaining needs and options blank for now, but if you have the details available, you can add them during this phase.

Image description

For the time being, you can skip the remaining registration sections. Simply scroll down in each section, click Save, and then return to the dashboard once completed.

After designing the OAuth consent page, we must publish the app before we experiment with it or ensuring that authentication works. By default, its state is “Testing," and after publishing, it is moved to production.

Image description

Once you've marked your app as "In production," it will be accessible to everyone with a Google account.

Generate your web client ID.

Now, we’ll go back to the Credential’s option to access the page where you can create your web client ID.
On the screen, select CREATE CREDENTIALS at the top of the page, and then click the OAuth client ID.

Image description

You will be asked to choose an application type as we have below. Go for Web application If you are following these steps for React (we are using the Google client ID for web).

Image description

Next, we'll pick a name for our client ID to identify or specify the specific ID link to a single app, this name is used. To distinguish between web, iOS, and Android IDs, we can put "Web ID," "Android ID," "iOS ID," and so on in their naming conventions:

Image description

Following that, we'll introduce two types of URLs: authorized JavaScript origins and authorized redirect URLs.

The “Authorized JavaScript origins URL” is the URL that your application logs in from. For React developers, it’s localhost (localhost:3000) or your hosted URL if you’ve hosted your app.

The “Authorized redirect URL” is the link that Google will return the user to after you’ve successfully logged them in. For instance, you might return them to your original link or redirect them to a different link. You’ll need to add the URL here.

Add the following URLs to the authorized javaScript origins and authorized redirect URLs: http://localhost:3000 and http://localhost, respectively:

Image description

To create a web client ID, you will need to click the “CREATE” button. You will be returned to the homepage, where you can view your freshly created credentials. To copy your new web client ID, hit the Copy icon.

Image description

Now that we've successfully built our web client ID, You'll go into our React app and add your cliend ID into .env file.

...

🔧 Obtaining a Google OAuth Client ID


📈 43.87 Punkte
🔧 Programmierung

🕵️ CVE-2022-22969 | Vmware Spring Security OAuth up to 2.5.1 OAuth 2.0 Client resource consumption


📈 32.45 Punkte
🕵️ Sicherheitslücken

🔧 Improving user safety in OAuth flows through new OAuth Custom URI scheme restrictions


📈 26.15 Punkte
🔧 Programmierung

🕵️ Openshift OAuth Server /oauth/token/request Request cross site scripting


📈 26.15 Punkte
🕵️ Sicherheitslücken

🔧 OAuth 2.0 Explained: The Complete Guide to Understanding OAuth


📈 26.15 Punkte
🔧 Programmierung

🔧 Client assertion in OAuth 2.0 client authentication


📈 25.69 Punkte
🔧 Programmierung

📰 How to Install Winscp FTP Client/SFTP Client/SCP Client (WinSCP Client) In Ubuntu


📈 25.22 Punkte
📰 Alle Kategorien

🕵️ AA20-304A: Iranian Advanced Persistent Threat Actor Identified Obtaining Voter Registration Data


📈 22.81 Punkte
🕵️ Sicherheitslücken

📰 The “Beatles” on Trial: Obtaining Justice for Victims of Foreign ISIS Fighters


📈 22.81 Punkte
📰 IT Security Nachrichten

📰 KPOT Analysis: Obtaining the Decrypted KPOT EXE, (Sun, Apr 19th)


📈 22.81 Punkte
📰 IT Security

🐧 Obtaining a physical address to RAM omitting the virtual memory


📈 22.81 Punkte
🐧 Linux Tipps

🔧 Obtaining tokens with AzureAuth inside a Shiny app


📈 22.81 Punkte
🔧 Programmierung

🔧 Guide to Obtaining Java and Python Certifications


📈 22.81 Punkte
🔧 Programmierung

🕵️ Obtaining Xfinity Modem Firmware


📈 22.81 Punkte
🕵️ Reverse Engineering

🔧 Obtaining the Cubic Hermite Spline Derivative on an Arbitrary Interval


📈 22.81 Punkte
🔧 Programmierung

📰 Tax/Audit Reform Could Be the Legislative Purpose for Obtaining Trump’s Tax Returns


📈 22.81 Punkte
📰 IT Security Nachrichten

🍏 Congo Accuses Apple of Obtaining Minerals Illegally; Say Macs, iPhones Stained with Blood of Locals


📈 22.81 Punkte
🍏 iOS / Mac OS

📰 Tax/Audit Reform Could Be the Legislative Purpose for Obtaining Trump’s Tax Returns


📈 22.81 Punkte
📰 IT Security Nachrichten

📰 Obtaining security clearance: Hurdles and requirements


📈 22.81 Punkte
📰 IT Security Nachrichten

📰 Obtaining Malware Signature Database


📈 22.81 Punkte
📰 IT Security Nachrichten

🎥 Input Output + Syslog (iO+S): Obtaining Data From Locked iOS Devices via Live Monitoring


📈 22.81 Punkte
🎥 IT Security Video

📰 Obtaining Effective IT Control with New-Gen Endpoint Management


📈 22.81 Punkte
📰 IT Nachrichten

📰 A simple guidance on obtaining effective endpoint security


📈 22.81 Punkte
📰 IT Security Nachrichten

⚠️ [papers] Obtaining Command Execution through the NetworkManager Daemon


📈 22.81 Punkte
⚠️ PoC

📰 Obtaining Malware Samples for Analysis


📈 22.81 Punkte
📰 IT Security Nachrichten

💾 Obtaining Serial Number, MAC, MEID and IMEI of a locked iPhone


📈 22.81 Punkte
💾 IT Security Tools

🪟 How to Fix the OverDrive Error in Obtaining License Issue


📈 22.81 Punkte
🪟 Windows Tipps

🕵️ Obtaining password hashes of Windows systems with PetitPotam attack


📈 22.81 Punkte
🕵️ Hacking

📰 'Antiquated process': data regulator on obtaining Cambridge Analytica warrant


📈 22.81 Punkte
📰 IT Security Nachrichten

📰 Mangelnde Prüfung von Signaturen in google-oauth-java-client (SUSE)


📈 21.06 Punkte
📰 IT Security Nachrichten

matomo