Light

ricca-hangson-674 / oauth-demo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rivolink/oauth-demo

0.0 0.0 0.0 1.08 MB

Google OAuth and Facebook OAuth demo for web applications

Home Page: https://oauth-demo.rivolink.mg

JavaScript 8.28% PHP 58.82% CSS 1.85% Hack 31.00% Procfile 0.05%

oauth-demo's Introduction

OAuth Demo

Local testing with PHP built-in server

Start PHP built-in server

php -S localhost:3092 -t web

Local HTTPS protocol with Stunnel

Download Stunnel from https://www.stunnel.org/downloads.html
Install it
Open configuration file stunnel.conf from [installation path]\stunnel\config\ directory
At the end of the file put the next part of the code:

[https]
accept  = localhost:9898
connect = localhost:3092
cert = stunnel.pem

Save the configuration file and restart Stunnel
Access the local website via: https://localhost:9898

Facebook OAuth configurations

Create a Facebook App

Go to: https://developers.facebook.com/apps/create/
Select "Consumer" for app type
Add a name and finish creating your app

Basic settings for Facebook App

In the left menu, select Settings > Basic
Fill in the fields: "Display name", "App domains", "Privacy Policy URL" and 'User data deletion '
Save changes

Facebook Login settings

In the dashboard, add products "Facebook Login" to your app
Comptele "Site URL" with https://localhost
In the left menu, select Facebook Login > Settings
Fill in "Valid OAuth Redirect URIs" with: https://localhost:9898/sign-up and https://localhost:9898/sign-in
Set "Login with the JavaScript SDK" to Yes
Fill in "Allowed Domains for the JavaScript SDK" with: https://localhost:9898
Save changes

Facebook App - Email and Public Profile access

In the left menu, select App Review > Permissions and Features
Search for "email" and "Get advanced access"
Search for "public_profile" and "Get advanced access"

Facebook App - Live Mode

In the header menu, switch your app to "App Mode: Live"
Copy web\private\facebook-auth.json.dist to web\private\facebook-auth.json
Set app_id value to your "Facebook App ID"
Set app_version value to your "Facebook App Version", maybe v14.0

Google OAuth configurations

Create a Google Project

Go to: https://console.cloud.google.com/projectcreate
Add a name and finish creating your project

Google OAuth consent screen

In the left menu, select "OAuth consent screen"
Choose "*User Type: External" and "Create"
Fill in "App information" fields
Fill in "App domain" fields
Add "App domain"
Add "Developer contact information"
Save and continue
Just "Save and continue" next steps

Google OAuth 2.0 Client IDs

In the left menu, select "Credentials"
In the header menu, select "Create Credentials" > "OAuth client ID"
Select "Web application" for "Application type"
Fill in "Name" field
For "Authorized JavaScript origins", add https://localhost
For "Authorized redirect URIs", add https://localhost/api/sign-up/google-callback and https://localhost/api/sign-in/google-callback
"Create" to finish
Backup "Client ID" and "Client Secret"

Google - Publish App

In the left menu, select "OAuth consent screen"
Click "Publish App" under "Publishing status" section
Copy web\private\google-auth.json.dist to web\private\google-auth.json
Set client_id value to your backuped Google "Client ID"
Set client_secret value to your backuped Google "Client Secret"

oauth-demo's People

Contributors

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.