search

czetsuya / keycloak-angular-auth

This is a project template that integrates Keycloak authentication server to an Angular5 project. It provides an authentication guard service that can restrict a component from being accessible if a user is not logged in.
20 stars 18 forks source link

Keycloak is not defined #3

Closed weihan1394 closed 4 years ago

weihan1394 commented 4 years ago

Hi,

Thank you for your detailed introduction video on youtube.

I have tried to implement it on to my project running on angular8 but I face an error prompting at keycloak.service.ts where it shows: Uncaught ReferenceError: Keycloak is not defined

From what I understand that the Keycloak is an 'any' variable as declared on line 6. But at line 18 you have passed the json object variable in. But from the error, it's saying the Keycloak variable is not defined which seems to the correct behavior.

Seeking your advice if I have missed out on anything.

keycloak.service.ts

screenshot error

angular: 8.2.14 keycloak-js: 9.0.2

czetsuya commented 4 years ago

Hi,

Have you added keycloak-js in your project?

https://github.com/czetsuya/Keycloak-Angular-Auth/blob/master/package.json

weihan1394 commented 4 years ago

Hi @czetsuya

Thank you for your prompt reply.

I have installed the latest and ur suggested keycloak-js version using npm previously but it's still not working. package.json

czetsuya commented 4 years ago

"keycloak-angular": "^7.2.0", "keycloak-js": "^9.0.2",

Seems like keycloak-angular is also using keycloak-js. Can you try with just keycloak-angular?

weihan1394 commented 4 years ago

I have just changed to keycloak-angular, but it seems to get the same error still.

package.json

weihan1394 commented 4 years ago

@czetsuya

I manage to identify the error, it's because I didn't add the js file at angular.json.

However, I believe I may have set my Keycloak client wrongly which resulted in the below error. I have set my created a new client id called pso-seak-app.

Screenshot error: https://imgur.com/a/gUjjXEy Client-id: https://imgur.com/a/STPfHPw Client: https://imgur.com/a/tNwOT9o

Is there any advice on how you setup your keycloak new realm?

czetsuya commented 4 years ago

Yes, you must add keycloak.json in your angular-cli.json config like https://github.com/czetsuya/Keycloak-Angular-Auth/blob/master/.angular-cli.json.

If you are running ng server on your local machine then you must add http://localhost:4200 and http://localhost:4200/* in the web origins section of keycloak configuration.

weihan1394 commented 4 years ago

@czetsuya

Hmm weird, I do still have the same problem even after a thorough check of my keycloak configuration. It still gives me the same problem as mentioned.

Screenshot error: https://imgur.com/a/gUjjXEy

czetsuya commented 4 years ago

Can you add * in the web origins?

weihan1394 commented 4 years ago

@czetsuya

I managed to fix it. Apparently, they are looking for url and not auth-server-url.

Thanks a lot for your advice and I like how clean is your code. Cheers!

czetsuya commented 4 years ago

I see. It seems like a recent upgrade to the library. I'm glad that you have solved the issue.

palpatoune commented 3 years ago

Hey i have the same error, can you tell me how you solve it ? thanks in advance :)

czetsuya commented 3 years ago

Hi,

Try to change "auth-server-url" with "url".

On Sat, Dec 12, 2020 at 7:21 PM palpatoune notifications@github.com wrote:

I've read your commit and for me my kaycloak.js is different kc.authServerUrl = config['auth-server-url']; kc.realm = config['realm']; kc.clientId = config['resource']; setupOidcEndoints(null); promise.setSuccess();

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/czetsuya/keycloak-angular-auth/issues/3#issuecomment-743741477, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGENMEA2FFSZX7QIESYMXLSUNGZ5ANCNFSM4MHC6WQA .

-- Best Regards, Edward P. Legaspi Remote Senior Java Software Engineer Mobile: +63 915-215-4716 Skype: @czetsuya Line: @czetsuya WhatsApp: +63 915-215-4716 WeChat: @czetsuya

--

DISCLAIMER: This e-mail message (including any attachments) is intended solely for the use of the addressee(s) and may contain information that is proprietary, privileged, confidential or otherwise legally exempt from disclosure. If you are not the intended recipient of this email message, you are not authorized to review, print, copy, disseminate, disclose or use this message, or otherwise take any action in reliance upon this message or its contents. If you have received this message in error, please notify the sender immediately and delete this message and all copies thereof from your computer systems (including servers, laptops, handheld devices, and back-up systems).

palpatoune commented 3 years ago

Hey i've change this but this wasn't the solution, i just forgot to add keycloak-js to my angular.json, Thanks for your time, appreciated !

palpatoune commented 3 years ago

But now i have this error : Failed to load resource: the server responded with a status of 404 (Not Found) on setp1.html image

did you also face this error ?

czetsuya commented 3 years ago

Hi,

What exactly are you doing? Can you give more details? What project do you have? What versions of KC, Angular did you use? And what are the steps that you did?

On Sat, Dec 12, 2020 at 9:19 PM palpatoune notifications@github.com wrote:

But now i have this error : Failed to load resource: the server responded with a status of 404 (Not Found) on setp1.html [image: image] https://user-images.githubusercontent.com/32883648/101984961-f5ac6e00-3c84-11eb-9a0a-568d6a62621a.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/czetsuya/keycloak-angular-auth/issues/3#issuecomment-743755237, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGENMH24CMUT4BR7UL2GZDSUNUWVANCNFSM4MHC6WQA .

-- Best Regards, Edward P. Legaspi Remote Senior Java Software Engineer Mobile: +63 915-215-4716 Skype: @czetsuya Line: @czetsuya WhatsApp: +63 915-215-4716 WeChat: @czetsuya

--

DISCLAIMER: This e-mail message (including any attachments) is intended solely for the use of the addressee(s) and may contain information that is proprietary, privileged, confidential or otherwise legally exempt from disclosure. If you are not the intended recipient of this email message, you are not authorized to review, print, copy, disseminate, disclose or use this message, or otherwise take any action in reliance upon this message or its contents. If you have received this message in error, please notify the sender immediately and delete this message and all copies thereof from your computer systems (including servers, laptops, handheld devices, and back-up systems).

palpatoune commented 3 years ago

Oh so i have :

I have add all your core folder + my keycloak environment and my keycloak.json.

And my project is to build an app, secrured with keycloak and a spring back who provide a rest Api

weihan1394 commented 3 years ago

@palpatoune do u have this html in your project? "step1.html"

Or do you have your keycloak.json?

Alternative, you may want to take a look at my previous project here: keycloak.json

palpatoune commented 3 years ago

My keycloak.json look liek that, i don't any client-id { "realm": "Projet-4A-progWeb", "auth-server-url": "http://localhost:8080/auth/", "ssl-required": "none", "resource": "frontend", "public-client": true, "confidential-port": 0 }

and no i don't have this html in my project

czetsuya commented 3 years ago

But now i have this error : Failed to load resource: the server responded with a status of 404 (Not Found) on setp1.html image

did you also face this error ?

I don't understand how you got this URL. Does this happen when you click the Signin button?

palpatoune commented 3 years ago

Oh i got this link from this error at the start of the application : GET http://localhost:8080/auth/realms/Projet-4A-progWeb/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)

do you want me to link a git repository ?

Sorry to ask so many thing, i realy apreciate your help 💯