Created
February 11, 2021 17:52
-
-
Save simon-saliba/f8eaad69889de791988360e0c920f789 to your computer and use it in GitHub Desktop.
OAuth client side - Complete example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
var GoogleAuth; | |
var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly'; | |
function handleClientLoad() { | |
// Load the API's client and auth2 modules. | |
// Call the initClient function after the modules load. | |
gapi.load('client:auth2', initClient); | |
} | |
function initClient() { | |
// In practice, your app can retrieve one or more discovery documents. | |
var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'; | |
// Initialize the gapi.client object, which app uses to make API requests. | |
// Get API key and client ID from API Console. | |
// 'scope' field specifies space-delimited list of access scopes. | |
gapi.client.init({ | |
'apiKey': 'YOUR_API_KEY', | |
'clientId': 'YOUR_CLIENT_ID', | |
'discoveryDocs': [discoveryUrl], | |
'scope': SCOPE | |
}).then(function () { | |
GoogleAuth = gapi.auth2.getAuthInstance(); | |
// Listen for sign-in state changes. | |
GoogleAuth.isSignedIn.listen(updateSigninStatus); | |
// Handle initial sign-in state. (Determine if user is already signed in.) | |
var user = GoogleAuth.currentUser.get(); | |
setSigninStatus(); | |
// Call handleAuthClick function when user clicks on | |
// "Sign In/Authorize" button. | |
$('#sign-in-or-out-button').click(function() { | |
handleAuthClick(); | |
}); | |
$('#revoke-access-button').click(function() { | |
revokeAccess(); | |
}); | |
}); | |
} | |
function handleAuthClick() { | |
if (GoogleAuth.isSignedIn.get()) { | |
// User is authorized and has clicked "Sign out" button. | |
GoogleAuth.signOut(); | |
} else { | |
// User is not signed in. Start Google auth flow. | |
GoogleAuth.signIn(); | |
} | |
} | |
function revokeAccess() { | |
GoogleAuth.disconnect(); | |
} | |
function setSigninStatus() { | |
var user = GoogleAuth.currentUser.get(); | |
var isAuthorized = user.hasGrantedScopes(SCOPE); | |
if (isAuthorized) { | |
$('#sign-in-or-out-button').html('Sign out'); | |
$('#revoke-access-button').css('display', 'inline-block'); | |
$('#auth-status').html('You are currently signed in and have granted ' + | |
'access to this app.'); | |
} else { | |
$('#sign-in-or-out-button').html('Sign In/Authorize'); | |
$('#revoke-access-button').css('display', 'none'); | |
$('#auth-status').html('You have not authorized this app or you are ' + | |
'signed out.'); | |
} | |
} | |
function updateSigninStatus() { | |
setSigninStatus(); | |
} | |
</script> | |
<button id="sign-in-or-out-button" | |
style="margin-left: 25px">Sign In/Authorize</button> | |
<button id="revoke-access-button" | |
style="display: none; margin-left: 25px">Revoke access</button> | |
<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script async defer src="https://apis.google.com/js/api.js" | |
onload="this.onload=function(){};handleClientLoad()" | |
onreadystatechange="if (this.readyState === 'complete') this.onload()"> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment