{"_id":"57acad697ae5c60e004ba3c4","user":"5542d87d795b590d001dc7ff","githubsync":"","__v":1,"parentDoc":null,"project":"5589ceae9883a40d00c433f3","version":{"_id":"5589ceae9883a40d00c433f6","__v":8,"project":"5589ceae9883a40d00c433f3","createdAt":"2015-06-23T21:25:02.865Z","releaseDate":"2015-06-23T21:25:02.865Z","categories":["5589ceaf9883a40d00c433f7","559ab19d2100d117005f1269","57d4a754899ab90e00105e5d","5807813b6d24211900953b99","5819154bf62fee0f00949855","5841d27cae05ac2500ba2680","5846c4ee5d064323007b1774","589e29c72793e937001c15c5"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"559ab19d2100d117005f1269","pages":[],"__v":0,"project":"5589ceae9883a40d00c433f3","version":"5589ceae9883a40d00c433f6","sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-07-06T16:49:33.553Z","from_sync":false,"order":0,"slug":"overview","title":"Overview"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-11T16:52:57.987Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":true,"order":1,"body":"Add the UserKit widget for login and registration to your webpage, and then check on the server if a user is logged in.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Create your UserKit app\"\n}\n[/block]\nSign into the <a href=\"https://dashboard.userkit.io\" target=\"_blank\">dashboard</a> and create a UserKit app.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Create an account page\"\n}\n[/block]\nCreate a folder named *quickstart*, and in that folder create a file named *account.html* containing the UserKit widget. Replace `\"<YOUR_USERKIT_APP_ID>\"` with your UserKit app id.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <head></head>\\n  <body>\\n   \\t\\n    <script src=\\\"https://widget.userkit.io/widget.js\\\"\\n    \\tdata-app-id=\\\"<YOUR_USERKIT_APP_ID>\\\"\\n      data-show-on-load=\\\"auto\\\">\\n    </script>\\n    \\n  </body>\\n</html>\",\n      \"language\": \"html\",\n      \"name\": \"account.html\"\n    }\n  ]\n}\n[/block]\nThe ```<script>``` tag inserts the UserKit widget into the page. When you load this page in a web browser you should now see the widget. See below for an example of what you should now see on your page.\n[block:embed]\n{\n  \"html\": \"<iframe height='350' scrolling='no' src='https://codepen.io/userkit/embed/BQvZxV' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>\",\n  \"url\": \"https://codepen.io/userkit/pen/BQvZxV\",\n  \"title\": \"BQvZxV\",\n  \"favicon\": \"https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico\",\n  \"image\": \"https://s3-us-west-2.amazonaws.com/i.cdpn.io/978639.BQvZxV.small.9dbe21e9-3cb6-451d-b4b0-2accde26d5c2.png\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"You'll need to serve *account.html* from a server for the widget to work properly, since some browsers don't allow cookies otherwise. On any computer that has Python installed (it's preinstalled on Mac and Linux) you can run the following command from the *quickstart* directory in your terminal:\\n\\n```\\npython -m SimpleHTTPServer 8080\\n```\\n\\nThen, in your web browser go to http://localhost:8080/account.html to view the page.\",\n  \"title\": \"\"\n}\n[/block]\nFor visitors who aren't logged in, the widget will display a login form. If a visitor is logged in, the widget will display the account settings form instead where that user can change their name, email or other account settings. See <a href=\"https://docs.userkit.io/docs/widget-configuration\">UserKitWidget Configuration</a> documentation for more details\n\nWhen a user is logged in, the widget will set a cookie named `userkit_auth_token` containing a user-session token. You'll use this token to fetch a logged-in user in step 3.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Check if a user is logged in\"\n}\n[/block]\nYour server can now check if there is a logged in user associated with a request. It does this by using the user-session token stored in the `userkit_auth_token` cookie to fetch the user from the UserKit API.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# UserKit Python library: https://github.com/workpail/userkit-python\\nimport userkit\\n\\nuk = userkit.UserKit(\\\"<YOUR_APP_SECRET_KEY>\\\")\\n\\n\\ndef request_handler(request, response):\\n  token = request.get_cookie(\\\"userkit_auth_token\\\")\\n  user = uk.users.get_current_user(token)\\n  \\n  if user:\\n    # There's a logged in user\\n    response.write(\\\"Welcome, {}\\\".format(user.name))\\n  else:\\n    # No logged in user, redirect to login page\\n    response.redirect(\\\"/account.html\\\")\\n\",\n      \"language\": \"python\"\n    },\n    {\n      \"code\": \"require 'json'\\nrequire 'rest-client'\\n\\ndef get_current_user(session_token)\\n  resource = RestClient::Resource.new(\\n    'https://api.userkit.io/v1/users/by_token',\\n    'api', '<YOUR_APP_SECRET_KEY>')\\n  begin\\n \\t\\tresponse = resource.get(:'X-User-TOken' => session_token)\\n    return JSON.parse(response.body)\\n \\trescue RestClient::Exception\\n  \\treturn nil\\n  end\\nend\\n\\n\\ndef request_handler(request, response)\\n  token = request.get_cookie(\\\"userkit_auth_token\\\")\\n  user = get_current_user(token)\\n  \\n  if (user)\\n    # There's a logged in user\\n    response.write(\\\"Welcome, \\\" + user.name)\\n  else\\n    # No logged in user, redirect to login page\\n    response.redirect(\\\"/account.html\\\")\\n  end\\nend\\n\",\n      \"language\": \"ruby\",\n      \"name\": \"Ruby\"\n    },\n    {\n      \"code\": \"package example\\n\\nimport (\\n\\t\\\"fmt\\\"\\n  // UserKit Go library: https://github.com/workpail/userkit-go\\n  userkit \\\"github.com/workpail/userkit-go\\\"\\n)\\n\\nfunc HandleSomeRequest(w http.ResponseWriter, r *http.Request) {\\n  uk := userkit.NewUserKit(\\\"<YOUR_APP_SECRET_KEY>\\\")\\n  \\n\\ttokenCookie, _ := r.Cookie(\\\"userkit_auth_token\\\")\\n\\tuser, err := uk.Users.GetUserBySession(tokenCookie.Value)\\n\\tif err != nil {\\n\\t\\t// No logged in user, redirect to login page\\n\\t\\thttp.Redirect(w, r, \\\"/account.html\\\", 401)\\n\\t\\treturn\\n\\t}\\n\\n\\t// There's a logged in user\\n\\tw.Write([]byte(\\\"Welcome, \\\" + user.Name))\\n}\",\n      \"language\": \"go\",\n      \"name\": \"Go\"\n    },\n    {\n      \"code\": \"<?php\\n\\nrequire_once('UserKit.php');\\n$uk = new UserKit('<YOUR_APP_SECRET_KEY>');\\n\\nfunction request_handler($request, $response)\\n{\\n  global $uk;\\n\\n  $token = $request->get_cookie('userkit_auth_token');\\n  $user = $uk->users->getCurrentUser($token);\\n  if ($user != null)\\n  {\\n    // There's a logged in user\\n    $response->write(\\\"Welcome, $user->name\\\");\\n  }\\n  else\\n  {\\n    // No logged in user, redirect to login page\\n    $response->redirect('/account.html');\\n  }\\n}\\n\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4. Add Buttons for Login, Account Settings, Registration and Logout\"\n}\n[/block]\nThe UserKit widget can also be configured to remain hidden on load by omitting the `data-show-on-load` property. You can add your own javascript to display a specific widget page such as login, settings, or registration on the click event of a button or link, or to logout the user.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Omit the data-show-on-load property so widget remains hidden -->\\n<script src=\\\"https://widget.userkit.io/widget.js\\\"\\n\\tdata-app-id=\\\"<YOUR_USERKIT_APP_ID>\\\">\\n</script>\\n\\n\\n<!-- Login button -->\\n<button onclick=\\\"UserKitWidget.open('login')\\\">Login</button>\\n\\n<!-- Signup button -->\\n<button onclick=\\\"UserKitWidget.open('register')\\\">Register</button>\\n\\n<!-- Account settings button -->\\n<button onclick=\\\"UserKitWidget.open('settings')\\\">Account Settings</button>\\n\\n<!-- Logout button -->\\n<button onclick=\\\"UserKit.logout()\\\">Logout</button>\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"HTML\"\n    }\n  ]\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe height='350' scrolling='no' src='https://codepen.io/userkit/embed/yVGzKK' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>\",\n  \"url\": \"https://codepen.io/userkit/pen/yVGzKK\",\n  \"title\": \"yVGzKK\",\n  \"favicon\": \"https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico\",\n  \"image\": \"http://codepen.io/userkit/pen/yVGzKK/image/large.png\"\n}\n[/block]\nTo learn more about what functions are available within the widget, see the widget <a href=\"https://docs.userkit.io/docs/javascript-api\">Javascript API</a> documentation.","excerpt":"Add login and user account management to your website in a few easy steps.","slug":"quickstart","type":"basic","title":"Quickstart"}

Quickstart

Add login and user account management to your website in a few easy steps.

Add the UserKit widget for login and registration to your webpage, and then check on the server if a user is logged in. [block:api-header] { "type": "basic", "title": "1. Create your UserKit app" } [/block] Sign into the <a href="https://dashboard.userkit.io" target="_blank">dashboard</a> and create a UserKit app. [block:api-header] { "type": "basic", "title": "2. Create an account page" } [/block] Create a folder named *quickstart*, and in that folder create a file named *account.html* containing the UserKit widget. Replace `"<YOUR_USERKIT_APP_ID>"` with your UserKit app id. [block:code] { "codes": [ { "code": "<html>\n <head></head>\n <body>\n \t\n <script src=\"https://widget.userkit.io/widget.js\"\n \tdata-app-id=\"<YOUR_USERKIT_APP_ID>\"\n data-show-on-load=\"auto\">\n </script>\n \n </body>\n</html>", "language": "html", "name": "account.html" } ] } [/block] The ```<script>``` tag inserts the UserKit widget into the page. When you load this page in a web browser you should now see the widget. See below for an example of what you should now see on your page. [block:embed] { "html": "<iframe height='350' scrolling='no' src='https://codepen.io/userkit/embed/BQvZxV' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>", "url": "https://codepen.io/userkit/pen/BQvZxV", "title": "BQvZxV", "favicon": "https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico", "image": "https://s3-us-west-2.amazonaws.com/i.cdpn.io/978639.BQvZxV.small.9dbe21e9-3cb6-451d-b4b0-2accde26d5c2.png" } [/block] [block:callout] { "type": "info", "body": "You'll need to serve *account.html* from a server for the widget to work properly, since some browsers don't allow cookies otherwise. On any computer that has Python installed (it's preinstalled on Mac and Linux) you can run the following command from the *quickstart* directory in your terminal:\n\n```\npython -m SimpleHTTPServer 8080\n```\n\nThen, in your web browser go to http://localhost:8080/account.html to view the page.", "title": "" } [/block] For visitors who aren't logged in, the widget will display a login form. If a visitor is logged in, the widget will display the account settings form instead where that user can change their name, email or other account settings. See <a href="https://docs.userkit.io/docs/widget-configuration">UserKitWidget Configuration</a> documentation for more details When a user is logged in, the widget will set a cookie named `userkit_auth_token` containing a user-session token. You'll use this token to fetch a logged-in user in step 3. [block:api-header] { "type": "basic", "title": "3. Check if a user is logged in" } [/block] Your server can now check if there is a logged in user associated with a request. It does this by using the user-session token stored in the `userkit_auth_token` cookie to fetch the user from the UserKit API. [block:code] { "codes": [ { "code": "# UserKit Python library: https://github.com/workpail/userkit-python\nimport userkit\n\nuk = userkit.UserKit(\"<YOUR_APP_SECRET_KEY>\")\n\n\ndef request_handler(request, response):\n token = request.get_cookie(\"userkit_auth_token\")\n user = uk.users.get_current_user(token)\n \n if user:\n # There's a logged in user\n response.write(\"Welcome, {}\".format(user.name))\n else:\n # No logged in user, redirect to login page\n response.redirect(\"/account.html\")\n", "language": "python" }, { "code": "require 'json'\nrequire 'rest-client'\n\ndef get_current_user(session_token)\n resource = RestClient::Resource.new(\n 'https://api.userkit.io/v1/users/by_token',\n 'api', '<YOUR_APP_SECRET_KEY>')\n begin\n \t\tresponse = resource.get(:'X-User-TOken' => session_token)\n return JSON.parse(response.body)\n \trescue RestClient::Exception\n \treturn nil\n end\nend\n\n\ndef request_handler(request, response)\n token = request.get_cookie(\"userkit_auth_token\")\n user = get_current_user(token)\n \n if (user)\n # There's a logged in user\n response.write(\"Welcome, \" + user.name)\n else\n # No logged in user, redirect to login page\n response.redirect(\"/account.html\")\n end\nend\n", "language": "ruby", "name": "Ruby" }, { "code": "package example\n\nimport (\n\t\"fmt\"\n // UserKit Go library: https://github.com/workpail/userkit-go\n userkit \"github.com/workpail/userkit-go\"\n)\n\nfunc HandleSomeRequest(w http.ResponseWriter, r *http.Request) {\n uk := userkit.NewUserKit(\"<YOUR_APP_SECRET_KEY>\")\n \n\ttokenCookie, _ := r.Cookie(\"userkit_auth_token\")\n\tuser, err := uk.Users.GetUserBySession(tokenCookie.Value)\n\tif err != nil {\n\t\t// No logged in user, redirect to login page\n\t\thttp.Redirect(w, r, \"/account.html\", 401)\n\t\treturn\n\t}\n\n\t// There's a logged in user\n\tw.Write([]byte(\"Welcome, \" + user.Name))\n}", "language": "go", "name": "Go" }, { "code": "<?php\n\nrequire_once('UserKit.php');\n$uk = new UserKit('<YOUR_APP_SECRET_KEY>');\n\nfunction request_handler($request, $response)\n{\n global $uk;\n\n $token = $request->get_cookie('userkit_auth_token');\n $user = $uk->users->getCurrentUser($token);\n if ($user != null)\n {\n // There's a logged in user\n $response->write(\"Welcome, $user->name\");\n }\n else\n {\n // No logged in user, redirect to login page\n $response->redirect('/account.html');\n }\n}\n", "language": "php" } ] } [/block] [block:api-header] { "type": "basic", "title": "4. Add Buttons for Login, Account Settings, Registration and Logout" } [/block] The UserKit widget can also be configured to remain hidden on load by omitting the `data-show-on-load` property. You can add your own javascript to display a specific widget page such as login, settings, or registration on the click event of a button or link, or to logout the user. [block:code] { "codes": [ { "code": "<!-- Omit the data-show-on-load property so widget remains hidden -->\n<script src=\"https://widget.userkit.io/widget.js\"\n\tdata-app-id=\"<YOUR_USERKIT_APP_ID>\">\n</script>\n\n\n<!-- Login button -->\n<button onclick=\"UserKitWidget.open('login')\">Login</button>\n\n<!-- Signup button -->\n<button onclick=\"UserKitWidget.open('register')\">Register</button>\n\n<!-- Account settings button -->\n<button onclick=\"UserKitWidget.open('settings')\">Account Settings</button>\n\n<!-- Logout button -->\n<button onclick=\"UserKit.logout()\">Logout</button>\n", "language": "javascript", "name": "HTML" } ] } [/block] [block:embed] { "html": "<iframe height='350' scrolling='no' src='https://codepen.io/userkit/embed/yVGzKK' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>", "url": "https://codepen.io/userkit/pen/yVGzKK", "title": "yVGzKK", "favicon": "https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico", "image": "http://codepen.io/userkit/pen/yVGzKK/image/large.png" } [/block] To learn more about what functions are available within the widget, see the widget <a href="https://docs.userkit.io/docs/javascript-api">Javascript API</a> documentation.