guruahn / vue-google-oauth2 Goto Github PK
View Code? Open in Web Editor NEW๐ Handling Google sign-in and sign-out for Vue.js applications
License: MIT License
๐ Handling Google sign-in and sign-out for Vue.js applications
License: MIT License
Hi,
The function getAuthResponse() never returns a refresh_token.
I've added prompt: 'consent' to the config and I've removed the previously approved application from my Google account (because apparently the refresh_token is only issued on the first approval).
My code is as follows
import GAuth from 'vue-google-oauth2';
const configGAuth = {
clientId: [CLIENT_ID],
scope: 'https://www.googleapis.com/auth/drive.readonly',
prompt: 'consent'
}
Vue.use(GAuth, configGAuth);
Then:
this.$gAuth.signIn()
.then(GoogleUser => {
var authResult = GoogleUser.getAuthResponse();
})
This always returns:
access_token: "xxx"
expires_at: 1599153341490
expires_in: 3599
first_issued_at: 1599149742490
id_token: "xxx"
idpId: "google"
login_hint: "xxx"
scope: "email profile openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/drive.readonly"
I've even tried this on a brand new Google account and still the same. Is there a configuration option not in the docs? According to Google there's an 'access_type' option that needs to be 'offline' in order to be issued a refresh token but I don't see reference to this in the docs.
Describe the bug
Typescript vue-cli compiler returns this error.
`ERROR in node_modules/vue-google-oauth2/index.ts(17,13):
17:13 Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?
15 | if (!script.readyState || /loaded|complete/.test(script.readyState)) {
16 | setTimeout(() => {
17 | resolve();
| ^
18 | }, 500);
19 | }
20 | };`
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expect vue-google-oauth2 to transpile properly.
Here's the code I ran
const googleUser = await this.$gAuth.signIn()
console.log(googleUser.getAuthResponse())
The prompt has been set to 'consent'.
However, the Refresh token is not returned.
I know that the Refresh token is created only when the token is retrieved for the first time according to Google's specification.
Therefore, I have to revoke the token before retrieving it.
Expected behavior
We also want the Refresh token to be returned.
Screenshots
The contents of googleUser.getAuthResponse are as shown in the image.
Greetings and thank you for this project.
I was able to set it up, but I don't know how to actually use it: my backend server gets a token, what can I do with it? how can I fetch information, such as email, from it?
Thanks in advance
I got rid of TS lint errors by doing this:
import GAuth from 'vue-google-oauth2'
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$gAuth: any
}
}
But specifying it as any doesn't really enforce types. Can someone help me figure out to make $gAuth the correct type?
Hey,
so when i tried to "npm run build" i come with this error:
npm run build
> [email protected] build C:\wamp64\www\vue\xxx
> cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 84a6a8eca84724ecbfa8
Version: webpack 3.12.0
Time: 5615ms
Asset Size Chunks Chunk Names
build.js 1.19 MB 0 [emitted] [big] main
build.js.map 1.55 MB 0 [emitted] main
ERROR in build.js from UglifyJs
Unexpected token: operator (>) [build.js:37030,34]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Elior\AppData\Roaming\npm-cache\_logs\2020-05-26T14_39_28_953Z-debug.log
So to understand why this is happen, i removed plugins from main.js
And find out unfortunately, that "vue-google-oauth2" causing this problem.
I have no idea how to solve it, i can provide any info needed..
How will it be affected on google+ API shutdown set to start from March 7, 2019
Describe the bug
I started a fresh Nuxt project - this project runs on my local machine with no issues. I followed your instructions to add this library as a Nuxt plugin - it compiles with no linting or compilation errors, but all I get in my browser is "Unexpected token 'export'"
To Reproduce
Steps to reproduce the behavior:
npx create-nuxt-app googleauth
Expected behavior
To work and be available to develop with
Desktop (please complete the following information):
I'm using (a) Handling Google sign-in, getting the one-time authorization code from Google for getting code and then send it to backend. It works great but there is one feature/info more which I need when user make authentication. I need mail address which user choose and authenticated. So is it possible to know address while getting authorizationCode ? I hope it is possible because I don't want to use second approach: (b) Alternatively, if you would like to directly get back the access_token and id_token only for getting address. Thanks!
Describe the bug
SyntaxError: Unexpected token 'export' after nuxt app compiled
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Nuxt app running without error
**Desktop
I received a syntax error without any details in Internet explorer for this module. Chrome and Firefox are working fine.
Describe the bug
scope to only 'email' is not effective. It always seem to be overridden and asking for more?
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Ask only for the user email
Desktop (please complete the following information):
Wondering if it could be related to
Note: By default, the fetch_basic_profile parameter of gapi.auth2.init() is set to true, which will automatically add 'email profile openid' as scope.
https://developers.google.com/identity/sign-in/web/sign-in
OAuth guidelines recommend using state
parameter for preventing CSRF attacks, but in your examples for server-side code
handling state isn't involved. It's practically the same when backend initiates sing in, a user authenticates on Google and Google redirects back to the backend with code and when frontend initiates sign in, the user authenticates with google and fronted receives code that is being sent to the backend. So in both cases backend needs state
to verify, and sing in must be initiated involving the backend?
I have multiple components that need to authenticate against different distinct apis with seperate scope and potentially seperate clientId.
How can I pull the implementation out of 'global' on main.js and set the gauthOptions locally in each component.
How can i exchange code from the server, if my client side is running on port 8080 and server is running 5000?
I tried to do this but i got an error, reporting redirect uri mismatch.
Thanks in advance
Originally posted by @Kapil-chn7 in #53 (comment)
I'm not able to sign in on Instagram viewer. FB viewer and another apps allow but Instagram doesn't.
Code taken from the sample keeps looping because the it never gets initialized
I've added the localhost and correct port to the Authorized JavaScript origins and changed the client ID to be my own. It however keeps looping through this section of code
created() { let that = this; let checkGauthLoad = setInterval(function() { that.isInit = that.$gAuth.isInit; that.isSignIn = that.$gAuth.isAuthorized; if (that.isInit) clearInterval(checkGauthLoad); }, 1000); }
Would I break anything if I import and use the package just in the login component?
I mean, I just need to login and provide the JWT from my backend after google auth passes. Am I forgetting anything?
If I use clientId
as a config parameter, I see the following error Missing required parameter 'client_id'
in the console as a response to the Google load.
import Vue from 'vue'
import GoogleAuth from 'vue-google-oauth2'
Vue.use(GoogleAuth, {
clientId: 'xxxx',
scope: 'profile email'
})
If I use client_id
it works. Am I missing something?
Hello,
I have implement the backend (.netCore 3) part to request access_token and refresh_token by authCode, but apparently I get refresh_token only the first time a user make the login with my App. Looking at google oauthplayground I see that they add another parameter on client request "access_type=offline", after some reading I realized that this is the way to get refresh_token everytime.
Is there any workaround to pass this param as an option ?
Appreciated
Describe the bug
I'm used vue-google-oauth2 to get authCode from google, then I want to use it to exchange access and refresh token by below:
curl -d "client_id=0123456789012-xxxxxxxxxxx&\
client_secret=CLIENT_SECRET&\
redirect_uri=postmessage&\
grant_type=authorization_code&\
code=AUTH_CODE" -H "Content-Type: application/json" -H "Content-Type: application/x-www-form-urlencoded" --header 'Accept: application/json' https://accounts.google.com/o/oauth2/token
but I get an 400 error:
{
"error": {
"code": 400,
"message": "Invalid JSON payload received. Unexpected token.\nclient_id=012345678\n^",
"status": "INVALID_ARGUMENT"
}
}
What I went wrong? Thanks for your support
To Reproduce
Replace client_id, client_secret, auth_code and run above Curl command
Expected behavior
Google OAuth response access token and refresh token
Describe the bug
Under TypeScript with "strictNullChecks": true
environment (Nuxt.js default configuration), I got the following error and can't compile properly:
ERROR in .../node_modules/vue-google-oauth2/index.ts
153:7 Object is possibly 'null'.
151 | GoogleAuthConfig = Object.assign(GoogleAuthDefaultConfig, options);
152 | if (options.scope) {
> 153 | GoogleAuthConfig.scope = options.scope;
| ^
154 | }
155 | if (options.prompt) {
156 | prompt = options.prompt;
To Reproduce
Steps to reproduce the behavior:
npm run generate
.Expected behavior
Properly generate the static website using npm run generate
.
Hey! How i can provide additional scopes after user sign in? Smth like this
https://developers.google.com/identity/sign-in/web/incremental-auth#step_2_request_additional_scopes
const option = new gapi.auth2.SigninOptionsBuilder();
option.setScope('email https://www.googleapis.com/auth/drive')
In my app i need split auth logic and request permission for calendar. Thanks
$gAuth.isInit property is never set to true due to the following error being thrown by the module.
details: "Cookies are not enabled in current environment."
error: "idpiframe_initialization_failed"
Chrome then also displays the cookies blocked icon in the URL bar.
My configuration is as follows:
Any idea what could be causing this & how to resolve this?
Where can we set Samesite=None attribute? This maybe a requirement for upcoming versions of Chrome. Thanks.
I log in fine.
I call signOut and then go to log in another user and I see I am logged in and can click on me and it does not even ask a password but puts me right in. This is a security breach.
I have looked and see there are 2 possible solutions, call the disconnect or call a revoke token.
Not really a bug but I am getting the following ESlint warning:
WARNING in /Users/simon/dev/omada/bo/node_modules/vue-google-oauth2/index.ts(138,10):
138:10 Parentheses are required when invoking a constructor
136 | };
137 |
> 138 | return new (Auth as any);
| ^
139 | })();
140 |
I have tried different combinations of parenthesis but couldn't propose a fix. Could you please have a quick look into it?
Version: typescript 3.5.3, tslint 5.20.0
Im using Nuxt 2.14.12, but getting this error
Everything must be fine
Added Api code to get access token as pugin (~/plugins/googleAuth.js)
import Vue from 'vue'
import GAuth from 'vue-google-oauth2'
export const gauthOption = {
clientId: "/key/",
scope: 'profile email',
prompt: 'select_account'
};
Vue.use(GAuth, gauthOption)
calling function
try {
let user = await this.$gAuth.signIn();
} catch (e) {
console.warn(e);
}
**Desktop
Hey,
Is there anyway to get refresh token?
Thanks
I am using the "Directly get back the access_token and id_token" in a Vue app, having the problem that the promise is never resolved. The account chooser opens, I select an account, after this no promise is resolved nor any other error to be found in the console.
This might not be related to your code since this a) has worked for me before and b) still is working on Safari!
this.$gAuth.signIn()
.then(user => {
// nor this, nor catch is being executed
}).catch( (e) => {
console.log("Auth error", e);
});
I was hoping you have some suggestions of how to debug this and get to the source of it.
Hi. Thank you for sharing good code.
This has helped me to improve my productivity.
During the development, I have questions about access_token.
Is there any way to get access_token
from the client side even if I log in with getAuthCode()
?
README.md says that I can only access google user object through signIn()
function. However, even if I authenticate on the server side with getAuthCode()
, client can access to google user object by window.gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse()
(GoogleUser.getAuthResponse)
So, I would like to ask you how to access access_token
or user profile in login via getAuthCode()
.
If you have to access windows.gapi.auth2.getAuthInstance (as described above), it would be nice if you have an API that you can access directly from vue-google-auth2.
I'm sure you're busy, but I'd appreciate it if you could help me.
์๋
ํ์ธ์.
๋จผ์ ์ข์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ณต์ ํด์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค. ๋๋ถ์ ์์ฐ์ฑ ํฅ์์ ๋ง์ ๋์์ด ๋์์ต๋๋ค.
์น์ฑ์ ๊ฐ๋ฐํ๋ ์ค access_token ๊ด๋ จํ ๊ถ๊ธ์ฆ์ด ์๊ฒจ์ ์ง๋ฌธ์ ๋จ๊น๋๋ค.
ํน์ getAuthCode ํจ์๋ฅผ ํตํด ์๋ฒ ์ฌ์ด๋์์ ๋ก๊ทธ์ธ ํ์ ๊ฒฝ์ฐ์๋ ํด๋ผ์ด์ธํธ๋จ์์ access_token์ ํ๋ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋์?
README.MD ์์๋ signIn() ํจ์๋ฅผ ํตํด์๋ง google User ๊ฐ์ฒด์ ์ ๊ทผํ ์ ์๋ค๊ณ ๋ ํ์ง๋ง.. getAuthCode๋ฅผ ํตํด ์๋ฒ์ฌ์ด๋์์ ์ธ์ฆํ๋๋ผ๋ ํด๋ผ์ด์ธํธ์์๋ window.gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse()
(GoogleUser.getAuthResponse) ๋ฅผ ํตํด ์ก์ธ์คํ ํฐ์ ์ ๊ทผํ ์ ์๋ค๊ณ ์๊ณ ์์ต๋๋ค.
๊ทธ๋์ ํน์ getAuthCode๋ฅผ ํตํ ์๋ฒ์ฌ์ด๋ ์ธ์ฆ์์๋ access_token์ด๋ user profile์ ์ ๊ทผํ๋ ค๋ฉด ์ด๋ป๊ฒ ์ ๊ทผํด์ผ ํ๋์ง ์ง๋ฌธ๋๋ฆฝ๋๋ค.
๋ง์ฝ ์์ ๊ธฐ์ ํ๋ฏ์ด ์ง์ window.gapi.auth2.getAuthInstance(์ดํ์๋ต) ๋ฅผ ํธ์ถํด์ ์ ๊ทผํด์ผ ํ๋ค๋ฉด, vue-google-oauth2 ์์๋ ์ง์ ์ ๊ทผํ ์ ์๋ API๊ฐ ์๋ค๋ฉด ์ข์๊ฒ ๊ฐ์ต๋๋ค.
๋ฐ์์๊ฒ ์ง๋ง ๋์์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
Getting this when using it with vuejs 2.0, haven't been able to find the root cause. Maybe something with the js api client injection?
I tried it without nuxt and it does what I want but I cannot figure out how to make it work in Nuxt.
The package can't manage multiples instances of authorization => rights in the same app.
It could be nice to name the variable this.$gauth to manage multiples rights (scopes) when we ask for this.$gAuth.getAuthCode()
Does anyone have an example of how to make vue-google-oauth2 work properly with Vue3 + Vuex + VueRouter?
Hey,
I'm currently trying to integrate your package into my Application. The authentication process of my SaaS-App is my own, so there is no Google Auth.
I just want to get permission to access the Google Calendar of my app users at the end of the day ๐
Right now i've implemented the Google "Sign-In" button via your package with the getAuthCode()
method and i'm getting the one-time code from Google. Then the exchange is done on backend-side, to get refresh code and so on. So far so good.
The only problem i'm having now is that after 1 hour (lifetime of code/token) the state isSignedIn of the user is false
.
The reason i need the state on frontend-side is, that i want to give the user the ability to "opt-out" from my service and revoke google permissions via disconnect()
method. This works perfectly within 1 hour.
I wasn't able to find any example to achieve this. Can you help me?
Thanks!
Hi,
Is there any way to get authcode which can be exchanged with refresh token everytime I get an authcode.
I get refresh token only the first time.
Thanks
Describe the bug
Using this component to authenticate via Google. Works in Chrome, FireFox. Having issues with Edge.
With Edge, in the application click on Login. A separate window opens allowing me to either select my account or to provide credentials. After this, the window just says "One moment please...". In the console this error is outputted "CustomError: Error in protected function: The window does not have an opener!" There are no console messages in the original window (where the application is). This never goes away.
The correct URLs are setup in Google.
An odd behavior is that when testing on localhost (no https), the login works fine. This is happening in our integrated test environment where we do have https.
To Reproduce
Steps to reproduce the behavior:
See above.
Expected behavior
The google authentication window should be dismissed and proceed with the application flow.
Desktop (please complete the following information):
Additional context
Component version 1.5.3
Vue 2.6.11
main.js
import GAuth from 'vue-google-oauth2'
const gauthOption = {
clientId: 59xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx4u6k42sqsv49.apps.googleusercontent.com',
scope: 'profile email',
prompt: 'select_account'
}
Vue.use(GAuth,gauthOption)
View.vue
mounted() {
let that = this;
let checkGauthLoad = setInterval(function() {
that.isInit = that.$gAuth.isInit;
that.isSignIn = that.$gAuth.isAuthorized;
if (that.isInit) clearInterval(checkGauthLoad);
}, 5000);
}
that.$gAuth.isInit is always false here
I wonder if this is the library's expected behavior. I couldn't find the information in the README.MD but my guess is that my app needs the oauth consent screen verified first by Google before I am able to use it. I am not so sure if it is the case here though.
What do you think the problem is?
Hey,
After using handleClickGetAuth(), on every refresh i see XHR request to:
"https://accounts.google.com/o/oauth2/iframerpc?action=issueToken..."
And
"https://accounts.google.com/o/oauth2/iframerpc?action=checkOrigin&origin=..."
I don't understand why it keeps sending on each refresh although i didn't set anything to run on load/created.
Only the function "handleClickGetAuth()" which trigger onclick
I have a typescript VueJS project. When adding this component, I'm getting Could not find a declaration file for module 'vue-google-oauth2'
error.
I've added the typedefs from this repo but that had no effect.
Is it possible to render the google login button instead of normal ones using ur lib?
Describe the bug
I'm using this library to get authCode from Google OAuth server, I set scope to adwords
and fetch_basic_profile
to false but when i see response from server, email profile openid
are automatically added as scope.
My gAuthOptions:
gauthOption = {
clientId: process.env.VUE_APP_GOOGLE_CLIENT_ID,
fetch_basic_profile: false,
prompt: "consent",
access_type: "offline",
scope: "https://www.googleapis.com/auth/adwords"
};
Expected behavior
Server only response for adwords
scope without email profile openid
Whenever I try to sign in with google-sign-in button which will call
const gAuthCode = await this.$gAuth.getAuthCode();
It is opening popup windows, abovementioned, every time!
How to integrate this with nuxt?
So far I added the plugin: /plugins/google.js
import Vue from 'vue'
import GAuth from 'vue-google-oauth2'
const clientId = 'my_client_id'
Vue.use(GAuth, { clientId })
And in nuxt.config.js
:
plugins: [
{ src: '@/plugins/google', ssr: false },
],
Nothing works...
Hi, the library works perfectly and gets the auth code on the frontend.
Now I made a POST route in flask(python web framework) which uses the exact code from the Python backend sample provided in this repo.
For some reason, I get this error - invalid_grantMalformed auth code.
I've been scratching my head over this for a while now.
Can somebody please shed some light on what could be the potential reasons for this error.
Describe the bug
shown error, when the google sign-in popup closed
To Reproduce
Steps to reproduce the behavior:
Desktop (please complete the following information):
Not always, but sometimes this happens.
flow.fetch_token(authorization_response=authorization_response)
credentials = flow.credentials
I am using Django in backend and VUE in frontend, wanted to use this way.
I have also tried to get the token.pickle with auth_code
flow.fetch_token(code=auth_code)
This also didn't work.
I want to use token.pickle for multiple time like this. is there any way to get that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.