Create SammyJS apps step-by-step guide on how to set up Sign-In that connects to any OAuth without exposing credentials to the client,

What is OAuth?

OAuth is an open protocol to allow secure authorization in a simple and standard method from web, mobile, and desktop applications.

Sammy.OAuth2

Sammy.OAuth2 is a plugin for using OAuth 2.0 to authenticate users and access your application’s API.

Sammy.js is light both in size (<20kb) and footprint. Pull it into your already started applications.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sammy.js oAuth and Login Tutorial</title>
</head>
<body>

<div id="content"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript" src="js/sammy-latest.min.js"></script>
<script type="text/javascript" src="js/plugins/sammy.template.js"></script>
<script type="text/javascript" src="js/plugins/sammy.storage.js"></script>
<script type="text/javascript" src="js/plugins/sammy.json.js"></script>
<script type="text/javascript" src="js/plugins/sammy.oauth2.js"></script>
<script type="text/javascript">
    $(function() { // document.ready
        // your script goes here
    });
</script>

<form role="form" action="#/profile" method="post">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label><input class="form-control" name="email" id="exampleInputEmail1" type="email" />
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label><input class="form-control" name="password" id="exampleInputPassword1" type="password" />
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

</body>
</html>

To keep things simple , i indicate this as follows:

var app = $.sammy(function() {

    this.use(Sammy.Template);
    this.use(Sammy.Storage);
    this.use(Sammy.Session);
    this.use(Sammy.OAuth2);

    this.authorize = "#/oauth/login"; //set customized login URL

}); // your application

var token = function() {return Math.random().toString(36).substr(2);}; //generate accessToken

define the main ‘route’

    app.get("#/", function(context) {
        context.render('view/index.template');
    });

    app.get("#/profile", function(context) {

        if(app.getAccessToken() != null)
            context.render('view/profile.template');
        else
            this.requireOAuth();

    });

 Login route

    app.get("#/oauth/login", function(context) {

        if(app.getAccessToken() != null){
            this.redirect("#/");
        }

        var state = this.params['state'];
        context.render('view/login.template');

    });

get the authorized user and set the access token

    app.post("#/oauth/login", function(context) {
        this.load('http://yourwebsite/login',
            {
                cache: false, 
                type: 'post',
                data: {
                    email: $("input[name=email]").val(), 
                    password: $("input[name=password]").val()
                }
            })
            .then(function(content) {
                if(content != false){
                    if(app.getAccessToken() == null){
                        app.setAccessToken(token());
                    }
                }else{
                    app.trigger("oauth.denied");
                    return false;
                }
            });
    });

Those events will fire-up when set the access token

  • oauth.connected – Access token set and ready to use. Triggered when new access token acquired, of when application starts and already has access token.
  • oauth.disconnected – Access token reset. Triggered by loseAccessToken().
  • oauth.denied – Authorization attempt rejected.
    app.bind("oauth.connected", function() {
        $(".guest").hide();
        $(".member").show();
        this.redirect("#/");
        console.log('logged');
    });

    app.bind("oauth.disconnected", function() {
        $(".guest").show();
        $(".member").hide();
    });

    // Handle access denied and other errors
    app.bind("oauth.denied", function(evt, error) {
        //$(".login_error").fadeIn().show();
    });

 Logout route

    app.get("#/oauth/logout", function(context) {
        context.loseAccessToken();
    });

 

Categorized in:

Framework, Website Development,