Connecting my authentication view with an external authentication server

[Ryan]

I was wondering if anyone knew it if it was possible for me to connect my authentication view to an outside server that contains logins and passwords, instead of using the users feature of the appbuilder. I connected the URL for my server within the "data binding" page of the view, but it doesn't seem to actually reference anything, just bypass the login screen entirely. I noticed when I do link my json server with the data binding page, it adds a "jsondataprovider.js" file in the "dataproviders" folder on the project navigator. Was also wondering what any of this code means

'use strict';

(function() {
    app.data.jsonDataProvider = {
        url: 'http://devjson2.safeinhome.com/login.aspx'
    }
}());

 

as it is what appears in the jsondataprovider.js file. Thanks!

[Anton Dobrev]

Hello Ryan,

Thanks for posting to the Telerik Developer Forums.

I am assuming that you have started scaffolding your mobile app in Telerik Platform Views service by configuring a JSON Data Provider pointing to http://devjson2.safeinhome.com/login.aspx. This also explains the jsondataprovider module you have now in your app, this is the JavaScript abstraction the Views service has created on top of the supplied URL and that will be used throughout the app to communicate with this provider.

However, at the current stage the Views service does not allow for creating an Authentication view for custom (JSON, oDATA) providers (besides the integrated one in Telerik Platform) but you should be able to do this yourself with the guidelines from below. You may also need to connect the views and app navigation accordingly to include the authentication view.

I am not sure what is the format your service (http://devjson2.safeinhome.com/login.aspx) accepts (this appears to be a ASP.NET web page that runs on a server) and you may eventually need to re-configure it or use another service URL.

Here are some guidelines you can review to incorporate an authentication view in your app.

My suggestion would be to use the Views service and:

- Decide how the view will fit into the navigation of the app
- Select a view that will fit the requirements, for example, a Form View.
- Create the View then modify its code

Alternatively, you can create an Authentication View with a different provider, then modify its code.

To integrate with your existing login API you may use jQuery AJAX calls as shown in the example below.

I am attaching an example code which you can use as an example when editing/adding the code of the view you created to make the authentication call. The crucial point is the signin function that makes a jQuery AJAX call to the web service.

​An example index.js for the component that holds the authentication form view:
​

Copy Code

app.authenticationView = kendo.observable({
    onShow: function () {



    },
    afterShow: function () {


    }
});

// START_CUSTOM_CODE_authenticationView
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

// END_CUSTOM_CODE_authenticationView
(function (parent) {
    var authenticationViewModel = kendo.observable({
        username: '',
        password: '',
        validateData: function (data) {
            if (!data.username) {
                alert('Missing username');
                return false;
            }

            if (!data.password) {
                alert('Missing password');
                return false;
            }

            return true;
        },
        signin: function () {
            var model = authenticationViewModel,
                username = model.username.toLowerCase(),
                password = model.password;

            if (!model.validateData(model)) {
                return false;
            }

            var baseLoginUrl = "http://devjson2.safeinhome.com/login.aspx"

            var usersData = {
                Username: username,
                Password: password
            };

            $.ajax({
                url: baseLoginUrl,
                type: "POST",
                data: usersData,
                dataType: "json",
                success: function (data) {
                    alert(JSON.stringify(data));
                },
                error: function (err) {
                    alert(JSON.stringify(err)); // there was an error
                }
            });

        }
    });

    parent.set('authenticationViewModel', authenticationViewModel);

})(app.authenticationView);

// START_CUSTOM_CODE_authenticationViewModel
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

// END_CUSTOM_CODE_authenticationViewModel

An example view.html for the same component:

​

Copy Code

<div data-role="view" data-title="Authentication" data-layout="main" data-model="app.authenticationView" data-show="app.authenticationView.onShow" data-after-show="app.authenticationView.afterShow">

    <div class="form-login">

        <div class="login">

            <div class="head">

                <h1>

                    Hello

                </h1>

                <h3>

                    Please login


                </h3>

            </div>

           

            <label>

                Username

                <input type="text" data-bind="value: authenticationViewModel.username" required autofocus>

            </label>

            <input type="password" data-bind="value: authenticationViewModel.password" required>

 

 

 <a data-role="button" class="primary" data-bind="events: { click: authenticationViewModel.signin }">Login</a>

        </div>

    </div>

</div>

Some further thoughts.

1. I am not sure what is the endpoint located at http://devjson2.safeinhome.com/login.aspx doing and the format of the required parameters and eventually you may need to configure a separate Web API endpoint that accepts the username and password and then returns an access token to the client app. You may find this Web API tutorial a good starting point. It is using a token-based authentication provided by ASP.NET which is the modern standard for authenticating users from mobile apps that use an enterprise backend. Use the access token for the subsequent authorization of the logged in user against the server API.

2. Please review the jQuery AJAX request above and use it as per your app's requirements, it is only a sample how to do the AJAX request

I hope that this answers your question.


Regards,
Anton Dobrev
Telerik