I’m also working on plugin which uses google oAuth and YouTube data API. The functionality works on backend, admin logs in just once using his gmail credentials and then with use of refresh_token we can keep him logged in.
Keep in mind the refresh token is generated only the first time you give access
to your app. You have to clear your permissions to fetch it
again.
I used PHP and not javascript, but still here is my complete function to give you a brief idea
<?php
public function uty_main_page(){
require_once ('config.php');
global $wpdb;
if(isset($_GET['code'])) {
$client->authenticate($_GET['code']);
$_SESSION['token'] = $client->getAccessToken();
$token_decode = json_decode($_SESSION['token']);
update_option( 'uty_refresh_token' , $token_decode->refresh_token );
$client->setAccessToken($_SESSION['token']);
echo 'Authorization Successful';
}
?>
<?php if(get_option( 'uty_refresh_token' ) != ''){ ?>
<li><a href="#uty_upload">Upload</a></li>
<li><a href="#uty_videos">All Videos</a></li>
<?php } ?>
<li><a href="#uty_settings">Settings</a></li>
</ul>
</div>
<div class="tab_content">
<?php if( $client->isAccessTokenExpired() ) { ?>
<?php if(get_option( 'uty_refresh_token' ) != ''){ ?>
<?php
$client->refreshToken( get_option( 'uty_refresh_token' ) );
$_SESSION['token'] = $client->getAccessToken();
$client->setAccessToken($client->getAccessToken());
?>
<div id="uty_upload">
<?php
if(isset($_POST['uty_video_submit'])){
if(isset($_FILES['uty_video'])){
$uploaded = media_handle_upload('uty_video', 0);
if(is_wp_error($uploaded)){
$message = $uploaded->get_error_message();
}
else{
//Do Some coding here
}
}
}
?>
</div>
<?php } ?>
<?php } ?>
<div id="uty_settings">
<?php if(isset($_POST['revoke-access-token'])){ ?>
<?php update_option( 'uty_refresh_token' , '' ); ?>
<?php update_option( 'uty_google_client_api' , '' ); ?>
<?php update_option( 'uty_google_client_id' , '' ); ?>
<?php update_option( 'uty_google_client_secret' , '' ); ?>
<?php update_option( 'uty_youtube_channel' , '' ); ?>
<?php } ?>
<h3>Please enter the below details to kick start your Youtube uploads</h3>
<?php if( !empty(get_option('uty_google_client_api')) && !empty(get_option('uty_google_client_id')) && !empty(get_option('uty_google_client_secret')) && empty(get_option('uty_refresh_token')) ){ ?>
<?php $state = mt_rand(); ?>
<?php $client->setState($state); ?>
<?php $_SESSION['state'] = $state; ?>
<?php $authUrl = $client->createAuthUrl(); ?>
<a href="<?php echo $authUrl; ?>">Click here to authorize your credentials</a>
<?php } elseif( !empty(get_option('uty_google_client_api')) && !empty(get_option('uty_google_client_id')) && !empty(get_option('uty_google_client_secret')) && !empty(get_option('uty_refresh_token')) ){ ?>
<?php } ?>
</div>
</div>
</div>
</div>
<?php } ?>
In the above function the main thing i’ve done is to store refresh_token when user logs in first time and then pass it in function to get new access token every time.
$client->refreshToken( get_option( 'uty_refresh_token' ) );
$_SESSION['token'] = $client->getAccessToken();
$client->setAccessToken($client->getAccessToken());
These three lines does the work of getting new access token every time.
Hope this helps you