Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

Seventh Heaven

Hi. Thank you for this tutorial. I’ve been wondering, how did the REST API on CarService works without creating their own API method in the controller class?

The only thing that controller class has is the coolCars() method to get all the cool cars. Things like adding, editing, deleting and getting one car worked automatically. Hope you can explain. Thank you again!

Matt Raible

The @RepositoryRestResource annotation adds this functionality.

Mihail Dimitriu

Thanks for this tutorial! The best I found.
Is there a way to integrate google and facebook auth in this project?

Matt Raible

You can add social login buttons to our hosted sign-in widget. However, you have to create a custom domain and import a TLS certificate to customize the hosted sign-in widget.

Mihail Dimitriu

thanks a lot. I created a facebook api and I connected it to a provider in Okta.
I’m a beginner, the problem is that to make a Customize Sign-In Page i need a custom domain.
How can I create a custom domain and import a TLS certificate?

I’ve found these links until now, but I’m stuck:
https://developer.okta.com/…
https://developer.okta.com/…

Matt Raible

I talked to a co-worker that said they stepped through and verified the steps work in the dev guide you posted links to. Can you be more precise about what’s blocking you?

Mihail Dimitriu

1)If I understand i have to own a domain on a server to do it, I don’t know how ot get a domain for example, example.com. and what free software have I to use to do it, if there is one?

Pheraps I can use github pages, but I’m not sure of this.

2)At step 2 of Settings → Customization → Domain Name → Edit, I arrived at:

____________________________________________________
Type: TXT

Host: _oktaverification.xxxxx.io

Data: 08axxxxxxxxxxxxxxxxxxxxxxxxxc904
_____________________________________________________

To create a TXT record:

Sign in to your Domain Name Registrar
Find the option to modify your DNS Records
Add a TXT record for the following domain: 'oktalogin.readme.io
Depending on your domain registrar, you may only need to enter _oktaverification, instead of _oktaverification.oktalogin…
Copy the value from the Data column above and paste it in the TXT record
After the TXT record is saved and confirmed by your DNS Registrar, click Next.

What does it mean?

3)Than, how can I integrate the TLS on my domain?

Thanks in advance, thanks also for your patience

Matt Raible

You can buy a domain from providers like GoDaddy or Google (https://domains.google.com). If you choose Google, you can do most of the DNS settings through your browser. For a TLS certificate, you can get a free one from Let’s Encrypt. This blog post shows how you can use Certbot to do that.

Mihail Dimitriu

Hi,
I had abilitate my custom domain and now I’m able to modify the htlm Sing In Page at

Customization → Singin page

I found these code to add the social login in the script section

<script type=“text/javascript”>
// “config” object contains default widget configuration
// with any custom overrides defined in your admin settings.
var config = {{{config}}};

// social login
config.idps = [
{ type: ‘FacebookLogin’, id: ‘0oadrrh812O9sbaxxxxx’ }
];
config.idpDisplay = ‘PRIMARY’;

// Render the Okta Sign-In Widget
var oktaSignIn = new OktaSignIn(config);
oktaSignIn.renderEl({ el: ‘#okta-login-container’ },
OktaUtil.completeLogin,
function(error) {
// Logs errors that occur when configuring the widget.
// Remove or replace this with your own custom error handler.
console.log(error.message, error);
}
);
</script>

by: https://devforum.okta.com/t…

I changed it with my provider name and id

Now how can see that it works? I when I visit https://dev-xxxxxx.customdo… I see a default widget page without facebook button

And how can I integrate it in the spring-angular project?

Thanks in advance

Matt Raible

Are you saying that you’ve customized your sign-in widget, but you’re still not seeing a Login with Facebook button on it?

Disqus tip: you can wrap your code in <pre><code> blocks for syntax highlighting. https://help.disqus.com/en/…

Mihail Dimitriu

Hello, Thanks for the tip!

Maybe I had to wait for the domain certificate setting, I added both google and facebook and it works in the perfect way now!

Thanks a lot for your help

Phil Harvey

I noticed that the logout functionality does not work for Chrome’s Incognito Mode. Does Okta have a solution to this problem?

Edit: This appears to be because for the initial logout the cookie is being blocked by Chrome. In production environments is it advisable/possible to track that to alert the user in a more visible way through Okta?

Matt Raible

Hello Phil,

I haven’t seen this issue with Chrome in Incognito mode, which I use often. Does this happen on the Angular side of things? Is there any sort of error or notification in your browser’s console?

Phil Harvey

https://uploads.disquscdn.c…

https://uploads.disquscdn.c…

I believe this is because, as indicated by the eye with a slash through it, initially the cookie was being blocked by Incognito. This is not a big deal, but, I could see how this could be frustrating for users without clear instructions like an arrow detailing how to remove the blockage.

Just wanted to share so you guys could look into it. Absolutely love the product and will be using it moving forward.

Matt Raible

This is a known issue that confuses developers from time-to-time. It’s making a request to /sessions/me and doesn’t find a session - hence the 404. If you don’t agree with this behavior, please create an issue in our okta-auth-js project.

global leads

Pretty! This was an incredibly wonderful post. Thank you for supplying this information.

AngularJS Training in Bangalore
Angular 7 Training in Bangalore

gytis dramblewolfskis

Hello Matt, great tutorial!

I have come to problem near the very end. Clicking login button does not work. My understanding is that my okta version is not 1.2.1 even though pom.xml was updated. I tried removing node-modules folders and npm install and that did not work.

I have found that package-lock.json does have version of 2.x but should have 1.x

@okta/okta-angular”: {
“version”: “2.0.0”,
“resolved”: “https://registry.npmjs.org/…”,
“integrity”: “sha512-G4l3/00ypMecOx+GH43QA9khqqwPXMuQQpSY5G5zu4+vkGZ+1OjvwPhwASCVN4fUJchJsLeTS5ucLhsfGOLp3Q==”,
“requires”: {
@okta/configuration-validation”: “^0.4.1”,
@okta/okta-auth-js”: “^3.0.0”,
“tslib”: “^1.9.0”
},

If possible could you provide some answer to this or sources where to learn about downgrading versions.

Matt Raible

Is there anything in your browser’s console that says what the error is? There’s two versions of Okta SDKs in the final version of this app. There’s the Okta Angular SDK (which is set in package.json) and there’s the Okta Spring Boot starter (which is defined in pom.xml). I don’t understand why you’re looking for version 1.2.1 in your dependencies.

If it’s easier you might just want to clone this application’s GitHub repo. It’s README contains instructions on how to make it work with your Okta org.

gytis dramblewolfskis

Identity Provider: Unknown
Error Code: invalid_request
Description: The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.

When I was checking if all files are the same I noticed app.component.spec.ts was generated a little differently and I could not do it the same way as your application(throws errors as oktaAuthModule has deprecated a method initAuth(). But it works the way it was generated

Matt Raible

This error happens when the redirect URL you’re sending from your app isn’t allowed in your Okta app settings. The redirect URI it’s trying to use will be in your URL as a parameter. If you add that URL to your Okta app, everything should work.

FWIW, there’s an Angular 9 + Spring Boot 2.2 version of this tutorial that shows how to use the latest version of our Angular SDK.