On Login page display button of okta for okta domain login

Questions
1

Hello everybody,

I am new to Okta,

I have created one organization with an okta domain name
https://Demo.okta.com

In that domain, I have created an app, in that redirect after login to my local domain home page
if it is a failed display error message.

I had Implement using widget its working fine, but I needed there is a simple button name with
“click here for okta login” now suppose m click here then need to open organization https://Demo.okta.com and after sign In need to redirect from home

image
image794×399 13.9 KB

Can anyone suggest how may I Implement the same or where it was stuck

Many thanks in advance

2

Hi @ilyas.patel

Here is an example to add a custom button inside the sign-in widget.

<html>

<head>
    <script src="https://global.oktacdn.com/okta-signin-widget/3.4.0/js/okta-sign-in.min.js" type="text/javascript"></script>
    <link href="https://global.oktacdn.com/okta-signin-widget/3.4.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="widget-container"></div>
    <script type="text/javascript">
        var signIn = new OktaSignIn({
            baseUrl: 'https://org.okta.com',
            customButtons: [{
                title: 'Click here for Okta login',
                className: 'btn-customAuth',
                click: function() {
                    window.location.href = 'http://org.okta.com';
                }
            }]
        });

        signIn.renderEl({
            el: '#widget-container'
        }, function success(res) {
            console.log(res);
        });
    </script>
</body>

</html>
3

Hello sir,
I have used the given solution which you have given but in this, it shows default design with given widget but I want to implement on my local site without the template and in this, it redirects to org.okta.com home page https://orgnaizationdomain.okta.com/app/UserHome but I want to redirect to My local domain dashboard Mydomain\dashboard

This is my scenario or I want to implement like this not default
Suppose I have declared one button in my login page as given below image
image

Now when I click on Okta login Button and it gonna be redirect to
https://orgnaizationdomain.okta.com/login/login.htm

and in that, if the user exists then it gonna be redirect to Mydomain/dashboard
if fail then display login failed
and this is my view page code

            <input class="button-1 login-button" onclick="myFunction()" value="Okta login" />
                    <script>
                        function myFunction() {
                           alert("in");
                        var signIn = new OktaSignIn({
                            baseUrl: 'https://${orgnaizationdomain.okta.com}',
                            authParams: {
                                issuer: 'https://${orgnaizationdomain.okta.com}/oauth2/default'
                            }
                        });
                        signIn.showSignInToGetTokens({
                            clientId: '${client id}',
                            // must be in the list of redirect URIs enabled for the OIDC app
                            redirectUri: '${mydomain/dashboard}',
                            // Return an access token from the authorization server
                            getAccessToken: true,
                            // Return an ID token from the authorization server
                            getIdToken: true,
                            scope: 'openid profile'
                            });
                        }
    </script>

But in this nothing happen , where I am wrong can you please address me

I have referred this link also but not worked for me
https://developer.okta.com/quickstart-fragments/widget/default-example/#configure-the-sign-in-widget

if you have any idea or suggestion please share it will be so helpful Thanks

4

Hi @ilyas.patel

You can set a direct link to the authorization endpoint in this case, something like the following

https://${orgnaizationdomain.okta.com}/oauth2/default/v1/authorize?response_type=id_token%20token&client_id=${client_id}&redirect_uri=${mydomain/dashboard}&state=abc&scope=openid&nonce=abc
5

Hi ,
I have Implement and add a link directly as per your suggestion

https://orgnaizationdomain/oauth2/default/v1/authorize?response_type=00Dp4dHKxkfpeOCCRlje2ukmixddiV9mWGPRNIAqli&client_id=0oa1zjvuy2Fq5bAAm357&redirect_uri=http://www.google.co.in&state=abc&scope=openid&nonce=abc

image
image1179×391 9.42 KB

I have some questions in mind let me raise hear hope you will clear me

  1. I have created one developer account of Okta

    • using Okta create on the app and in social login, it works fine

  2. I have created Organization account and create the same thing as develop in Okta

but little confuse the difference between developer and organization

and also my client needed

when I click on login with okta
then redirect to domain.okta.com and in that, it can display login design as default and if success redirects.

so for this flow, I have to refer hosted login Okta, custom sign In, but not work for me

Is any other way I can get your support for the same , if possible it will save lots of hour for me

6

Hi @ilyas.patel

Regarding the error, it occurred because the redirect_uri passed as query parameter http://www.google.co.in is different than the one added in the application https://www.google.co.in.

Regarding reaching out, please feel free to open a support ticket with us at developers@okta.com and one of our Developer Support Engineers will assist you.

7

Hello, @dragos,

I have sent mail at developers@okta.com with description
hope they will assist as soon as possible for the same

Thanks, @dragos

8

Hi @dragos,

https://orgnaizationdomain/oauth2/default/v1/authorize?response_type=00Dp4dHKxkfpeOCCRlje2ukmixddiV9mWGPRNIAqli&client_id=0oa1zjvuy2Fq5bAAm357&redirect_uri=https://www.google.co.in&state=abc&scope=openid&nonce=abc

Using this it will redirect to google.co.in and its working fine,

But I need something like that, when I click Custom log in with Okta login it will redirect to the Login page of Okta and after entering the user name and password it will redirect to the home page of my domain site something like this I needed.

9

Hi @ilyas.patel

If you change the redirect_uri to point back to your application on callback endpoint and hardcode this URL in a button “Custom log in with Okta login”, does it work?