├── CaptchaAzureFunction ├── sample.dat ├── function.json └── index.js ├── Assets ├── logo.png ├── background.jpg ├── selfAsserted.html └── global.css ├── ReadmeImages ├── create-api-connector.png ├── custom-attribute-add.png ├── enable-api-connector.png ├── configure_page_layouts.png ├── select-custom-attribute.png └── search-for-extensions-app-id.png ├── package.json ├── host.json ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── .gitignore ├── SECURITY.md └── README.md /CaptchaAzureFunction/sample.dat: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Azure" 3 | } -------------------------------------------------------------------------------- /Assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/Assets/logo.png -------------------------------------------------------------------------------- /Assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/Assets/background.jpg -------------------------------------------------------------------------------- /ReadmeImages/create-api-connector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/create-api-connector.png -------------------------------------------------------------------------------- /ReadmeImages/custom-attribute-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/custom-attribute-add.png -------------------------------------------------------------------------------- /ReadmeImages/enable-api-connector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/enable-api-connector.png -------------------------------------------------------------------------------- /ReadmeImages/configure_page_layouts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/configure_page_layouts.png -------------------------------------------------------------------------------- /ReadmeImages/select-custom-attribute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/select-custom-attribute.png -------------------------------------------------------------------------------- /ReadmeImages/search-for-extensions-app-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha/main/ReadmeImages/search-for-extensions-app-id.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "captcha-b2c-sign-up-node", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "start": "func start", 7 | "test": "echo \"No tests yet...\"" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.19.2", 11 | "qs": "^6.9.4" 12 | }, 13 | "devDependencies": {} 14 | } 15 | -------------------------------------------------------------------------------- /CaptchaAzureFunction/function.json: -------------------------------------------------------------------------------- 1 | { 2 | "bindings": [ 3 | { 4 | "authLevel": "function", 5 | "type": "httpTrigger", 6 | "direction": "in", 7 | "name": "req", 8 | "methods": [ 9 | "post" 10 | ] 11 | }, 12 | { 13 | "type": "http", 14 | "direction": "out", 15 | "name": "res" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /host.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0", 3 | "extensionBundle": { 4 | "id": "Microsoft.Azure.Functions.ExtensionBundle", 5 | "version": "[1.*, 2.0.0)" 6 | }, 7 | "logging": { 8 | "fileLoggingMode": "always", 9 | "logLevel": { 10 | "default": "Information", 11 | "Host.Results": "Error", 12 | "Function": "Trace", 13 | "Host.Aggregator": "Trace" 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | 24 | # nyc test coverage 25 | .nyc_output 26 | 27 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 28 | .grunt 29 | 30 | # Bower dependency directory (https://bower.io/) 31 | bower_components 32 | 33 | # node-waf configuration 34 | .lock-wscript 35 | 36 | # Compiled binary addons (https://nodejs.org/api/addons.html) 37 | build/Release 38 | 39 | # Dependency directories 40 | node_modules/ 41 | jspm_packages/ 42 | 43 | # TypeScript v1 declaration files 44 | typings/ 45 | 46 | # Optional npm cache directory 47 | .npm 48 | 49 | # Optional eslint cache 50 | .eslintcache 51 | 52 | # Optional REPL history 53 | .node_repl_history 54 | 55 | # Output of 'npm pack' 56 | *.tgz 57 | 58 | # Yarn Integrity file 59 | .yarn-integrity 60 | 61 | # dotenv environment variables file 62 | .env 63 | .env.test 64 | 65 | # parcel-bundler cache (https://parceljs.org/) 66 | .cache 67 | 68 | # next.js build output 69 | .next 70 | 71 | # nuxt.js build output 72 | .nuxt 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless/ 79 | 80 | # FuseBox cache 81 | .fusebox/ 82 | 83 | # DynamoDB Local files 84 | .dynamodb/ 85 | 86 | # TypeScript output 87 | dist 88 | out 89 | 90 | # Azure Functions artifacts 91 | bin 92 | obj 93 | appsettings.json 94 | local.settings.json 95 | 96 | # Other 97 | *.DS_Store* 98 | 99 | # Visual Studi Code 100 | .vscode/ -------------------------------------------------------------------------------- /Assets/selfAsserted.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Sign in 5 | 6 | 7 | 8 | 9 | 14 | 15 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 | 33 |
34 |

Sign up for a new account

35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 60 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Security 4 | 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). 6 | 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below. 8 | 9 | ## Reporting Security Issues 10 | 11 | **Please do not report security vulnerabilities through public GitHub issues.** 12 | 13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report). 14 | 15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc). 16 | 17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 18 | 19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: 20 | 21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) 22 | * Full paths of source file(s) related to the manifestation of the issue 23 | * The location of the affected source code (tag/branch/commit or direct URL) 24 | * Any special configuration required to reproduce the issue 25 | * Step-by-step instructions to reproduce the issue 26 | * Proof-of-concept or exploit code (if possible) 27 | * Impact of the issue, including how an attacker might exploit the issue 28 | 29 | This information will help us triage your report more quickly. 30 | 31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs. 32 | 33 | ## Preferred Languages 34 | 35 | We prefer all communications to be in English. 36 | 37 | ## Policy 38 | 39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd). 40 | 41 | -------------------------------------------------------------------------------- /CaptchaAzureFunction/index.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios'); 2 | const qs = require('qs'); 3 | 4 | module.exports = async function (context, req) { 5 | 6 | // parse Basic Auth username and password 7 | var header = req.headers["authorization"] || "", // get the header 8 | token = header.split(/\s+/).pop() || "", // and the encoded auth token 9 | auth = new Buffer.from(token, "base64").toString(), // convert from base64 10 | parts = auth.split(/:/), // split on colon 11 | username = parts[0], 12 | password = parts[1]; 13 | 14 | // Check for HTTP Basic Authentication, return HTTP 401 error if invalid credentials. 15 | if ( 16 | username !== process.env["BASIC_AUTH_USERNAME"] || 17 | password !== process.env["BASIC_AUTH_PASSWORD"] 18 | ) { 19 | context.res = { 20 | status: 401, 21 | }; 22 | context.log("Invalid Authentication"); 23 | return; 24 | } 25 | 26 | context.log('JavaScript HTTP trigger function processed a request.'); 27 | 28 | let data = req.body; 29 | 30 | 31 | const extensionAttributeKey = "extension_" + process.env["B2C_EXTENSIONS_APP_ID"] + "_CaptchaUserResponseToken"; 32 | 33 | let captchaToken = data && data[extensionAttributeKey]; //extension app-id 34 | 35 | // Calls Captcha API check for server-side validation of the generated token 36 | let captchaApiCheck = captchaToken && await axios.post("https://www.google.com/recaptcha/api/siteverify", qs.stringify({ 37 | "secret": process.env["CAPTCHA_SECRET_KEY"], 38 | "response": captchaToken 39 | })).then(function (response) { 40 | const success = response.data.success; 41 | if (!success) { 42 | context.log("Captcha verification unsuccessful: " + JSON.stringify(response)); 43 | } 44 | return success; 45 | }).catch(function (err) { 46 | context.log.error("Some other issue with Captcha API call: " + JSON.stringify(err)); 47 | return false; 48 | }); 49 | 50 | context.log("value of captcha check"); 51 | context.log(captchaApiCheck); 52 | 53 | 54 | var body = { 55 | "version": "1.0.0", 56 | "status": 400, 57 | "action": "ValidationError", 58 | }; 59 | var status = 400; 60 | 61 | if (!captchaToken) { 62 | context.log("No captcha token verification code was sent to the API."); 63 | body["userMessage"] = "Please complete the Captcha." 64 | } else if (!captchaApiCheck) { 65 | body["userMessage"] = "Invalid Captcha. Please try again." 66 | } else { 67 | status = 200; 68 | body = { 69 | "version": "1.0.0", 70 | "action": "Continue", 71 | [extensionAttributeKey]: "" //overwrites extension attribute to "" in order to not store it in the directory 72 | }; 73 | } 74 | 75 | context.res = { 76 | status: status, 77 | body: body 78 | }; 79 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | page_type: sample 3 | languages: 4 | - javascript 5 | - nodejs 6 | products: 7 | - azure-active-directory 8 | description: "A sample to demonstrate how to use a CAPTCHA servicein Azure AD B2C sign-up user flows." 9 | urlFragment: active-directory-node-b2c-sign-up-user-flow-captcha 10 | --- 11 | 12 | # active-directory-node-b2c-user-flow-captcha 13 | 14 | ## Contents 15 | 16 | | File/folder | Description | 17 | | --------------------------- | ------------------------------------------ | 18 | | Assets/selfAsserted.html | Sample custom HTML and JS script file for user flow. | 19 | | Assets | Contains UI/UX assets used by the user flows. | 20 | | CaptchaAzureFunction(AzureFunction.cs) | Sample source code for Node.js HTTP trigger. | 21 | | `README.md` | This README file. | 22 | | `.gitignore` | Define what to ignore at commit time. | 23 | | `CONTRIBUTING.md` | Guidance on how to contribute to this repository. | 24 | | `LICENSE.md` | The license for the sample. | 25 | | `SECURITY.md` | The security notice for the sample. | 26 | 27 | ## Key Concepts 28 | 29 | CAPTCHA services are often used in authentication scenarios to protect against bots or other automated abuse. This sample demonstrates how to integrate an Azure AD B2C sign-up user flow with a CAPTCHA service. 30 | 31 | Key components: 32 | 33 | - [**reCAPTCHA**](https://developers.google.com/recaptcha/) - a CAPTCHA service for protecting against bots and other automated abuse. 34 | - **Azure AD B2C sign-up user flow** - The sign-up experience that will be using the CAPTCHA service. Will utilize the [custom HTML & JavaScript](https://docs.microsoft.com/azure/active-directory-b2c/customize-ui-overview) and [API connectors](https://docs.microsoft.com/azure/active-directory-b2c/api-connectors-overview) to integrate with the CAPTCHA service. 35 | - **Azure Functions** - API endpoint hosted by you that works in conjunction with the **API connectors** feature. This API is responsible for doing the server-side validation of the CAPTCHA challenge. 36 | 37 | This same pattern can be used for other CAPTCHA services and with other API hosting services. 38 | 39 | ## Create an API key pair for reCAPTCHA V2 40 | 41 | - Follow the [reCAPTCHA documentation](https://developers.google.com/recaptcha/intro) to create an API key pair for your scenario. 42 | - Use your Azure AD B2C tenant as the **domain**: `.b2clogin.com` 43 | - You will receive a **site_key** and **secret_key**. The values of these are referred to as **`CAPTCHA_SITE_KEY`** and **`CAPTCHA_SECRET_KEY`** in the sample code and correspond to keys used in client-side and server-side CAPTCHA API calls. 44 | 45 | ## Create a "CaptchaUserResponseToken" Custom Attribute 46 | 47 | 1. From the Azure Portal, go to **Azure AD B2C** 48 | 1. Select **User Attributes** 49 | 1. Select **Add** 50 | 1. Enter `CaptchaUserResponseToken` as the attribute **Name** 51 | 1. **Create** 52 | 53 | ![Custom attribute creation](ReadmeImages/custom-attribute-add.png) 54 | 55 | Learn more about [custom attributes](https://docs.microsoft.com/azure/active-directory-b2c/user-flow-custom-attributes). 56 | 57 | ## Create a user flow 58 | 59 | This can be either be a **sign up and sign in** or a just **sign up** or user flow. Either way, the CAPTCHA will only be shown during sign up. 60 | 61 | 1. [Follow these instructions](https://docs.microsoft.com/azure/active-directory-b2c/tutorial-create-user-flows). If using an existing user flow, note that user flows must be of the "Recommended (next-generation preview)" version type. 62 | 1. In the user flow settings, navigate to **User attributes** and select the **CaptchaUserResponseToken** claim. 63 | 64 | ![Select custom attribute in user flow](ReadmeImages/select-custom-attribute.png) 65 | 66 | ## Configure custom HTML, JavaScript, and Page Layouts 67 | 68 | The **Assets > selfAsserted.html** file contains an HTML template with JavaScript (`