사이드 메뉴
Getting started
Kakao Developers
Login
Communication
Advertisement
- Concepts
- Ad creation: Ad account
- Ad creation: Campaign
- Ad creation: Ad group
- Targeting for ad group
- Custom audience targeting for ad group
- Ad creation: Creative common
- Ad creation: Display creative
- Ad creation: Message creative
- Ad creation: Personalized message creative
- Bizboard landing settings
- Report
- Message management
- Personalized message management
- Message ad management
- Message ad operation
- Ad View management
- Business Form linkage management
- Pixel & SDK linkage management
- Audience management
- Engagement targeting management
- Customer file management
- Friend group management
- Ad account management
- Reference
- Type information
- Error code
Set up for hybrid app
This document provides how to set a hybrid application using Kakao SDK for JavaScript.
To use the JavaScript SDK for a web page on a hybrid application ("hybrid app"), develop a WebView as follows to work properly.
To integrate Kakao Login and Kakao Talk Share into a hybrid app using the JavaScript SDK, proceed with the extra jobs as follows due to technological limitations.
The JavaScript SDK calls a URL to launch Kakao Talk for Kakao Login and Kakao Talk Share. When the URL is opened in a Webview, Kakao Talk cannot be launched, and an error occurs.
JavaScript SDK uses a Pop-up window for a better user experience. To use the feature properly, create or remove a Webview for the Pop-up when window.open() and window.close() are called.
On Android 11 or higher, add the package name to the AndroidManifest.xml file to implement the Kakao Login and Kakao Talk Share features using the JavaScript SDK. Otherwise, the Android Framework blocks the API calls.
<manifest package="com.example.sample"><queries><package android:name="com.kakao.talk" /></queries>...</manifest>
To log in with Kakao or send a Kakao Talk Share message, the JavaScript SDK creates a URL to run Kakao Talk and makes a call. In general, a web browser starts Kakao Talk through the URL.
Use Intent URI to run an app through a WebView on the Android app. Refer to Android Intents with Chrome for more details.
Create Intent URI for the JavaScript SDK to run Kakao Talk and make a call. Override the WebViewClient#shouldOverrideUrlLoading method in WebView, parse intent and run Activity.
webView = // main WebView// common settingswebView.settings.run {javaScriptEnabled = truejavaScriptCanOpenWindowsAutomatically = truesetSupportMultipleWindows(true)}webView.webViewClient = object: WebViewClient() {override fun shouldOverrideUrlLoading(view: WebView,request: WebResourceRequest): Boolean {Log.d(TAG, request.url.toString())if (request.url.scheme == "intent") {try {// Create Intentval intent = Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)// run an app if there is an executable app.if (intent.resolveActivity(packageManager) != null) {startActivity(intent)Log.d(TAG, "ACTIVITY: ${intent.`package`}")return true}// Load the WebView if there is Fallback URLval fallbackUrl = intent.getStringExtra("browser_fallback_url")if (fallbackUrl != null) {view.loadUrl(fallbackUrl)Log.d(TAG, "FALLBACK: $fallbackUrl")return true}Log.e(TAG, "Could not parse anythings")} catch (e: URISyntaxException) {Log.e(TAG, "Invalid intent request", e)}}// Implement the rest logic for a service.return false}}
Use a pop-up window to implement some functionalities in the JavaScript SDK for a better user experience. Make a WebView created or deleted according to window.open() and window.close() calls.
After setting WebChromeClient for WebView, the following methods are called when a pop-up function starts in JavaScript.
- window.open() → onCreateWindow()
- window.close() → onCloseWindow()
webView = // Main WebViewwebViewLayout = // The layout that the WebView is included// Common settingswebView.settings.run {javaScriptEnabled = truejavaScriptCanOpenWindowsAutomatically = truesetSupportMultipleWindows(true)}webView.webChromeClient = object: WebChromeClient() {/// ---------- Open pop-up ----------/// - Use a pop-up for Kakao Login in the JavaScript SDK./// - Must create a seperate WebView when calling window.open()///override fun onCreateWindow(view: WebView,isDialog: Boolean,isUserGesture: Boolean,resultMsg: Message): Boolean {// Create a WebViewvar childWebView = WebView(view.context)// Set the same WebView as a parent WebView.childWebView.run {settings.run {javaScriptEnabled = truejavaScriptCanOpenWindowsAutomatically = truesetSupportMultipleWindows(true)}layoutParams = view.layoutParamswebViewClient = view.webViewClientwebChromeClient = view.webChromeClient}// Add a WebView to the layoutwebViewLayout.addView(childWebView)// TO DO: It is recommended to manage a seperate WebView// to handle navigation action of users// such as onBackPressed() besides adding a layout.// ex) childWebViewList.add(childWebView)// Syncronize between WebViewsval transport = resultMsg.obj as WebView.WebViewTransporttransport.webView = childWebViewresultMsg.sendToTarget()return true}/// ---------- Close a pop-up ----------/// - Must close the created WebView when window.close() is called.///override fun onCloseWindow(window: WebView) {super.onCloseWindow(window)// Remove a pop-up from the layoutwebViewLayout.removeView(window)// TO DO: It is recommended to manage a seperate WebView array// to handle navigation action of users// such as onBackPressed() besides adding a layout.// ex) childWebViewList.remove(childWebView)}}
To log in with Kakao or send a Kakao Talk Share message, the JavaScript SDK creates a URL to run Kakao Talk and makes a call.
On iOS devices, an app is launched through Custom URL Schemes or Universal Links. If a Universal Link is invoked, a web browser launches Kakao Talk through the URL. The JavsScript SDK supports the Universal Link.
On the other hand, if a Custom URL Scheme is invoked, process as follows for a WebView. Otherwise, an error occurs. Kakao Talk only starts when opening the URL on a WebView through the open(_ url:) method.
func webView(_ webView: WKWebView,decidePolicyFor navigationAction: WKNavigationAction,decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {print(navigationAction.request.url?.absoluteString ?? "")// If the Custom URL Scheme is invoked, open(_ url:) is called.if let url = navigationAction.request.url , ["kakaolink"].contains(url.scheme) {// If the system can handle the url, Kakao Talk is launched.if UIApplication.shared.canOpenURL(url) {UIApplication.shared.open(url, options: [:], completionHandler: nil)}decisionHandler(.cancel)return}// Implement the rest logic for your service.decisionHandler(.allow)}
Use a pop-up window to implement some functionalities in the JavaScript SDK for a better user experience. Make a WebView created or deleted according to window.open() and window.close() calls.
After setting WKUIDelegate for WebView, the following methods are called when a pop-up function starts in JavaScript.
- window.open() → webView(_:createWebViewWith:for:windowFeatures:)
- window.close() → webViewDidClose(_:)
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {// Manage a list of WebViewsvar webViews = [WKWebView]().../// ---------- Open pop-up ----------/// - Use a pop-up for Kakao Login in the JavaScript SDK./// - Must create a seperate WebView when calling window.open()///func webView(_ webView: WKWebView,createWebViewWith configuration: WKWebViewConfiguration,for navigationAction: WKNavigationAction,windowFeatures: WKWindowFeatures) -> WKWebView? {guard let frame = self.webViews.last?.frame else {return nil}// If creating a WebView and returning the WebView, the WebView becomes a child of the current WebView as a parentreturn createWebView(frame: frame, configuration: configuration)}/// ---------- Close a pop-up ----------/// - Must close the created WebView when window.close() is called.///func webViewDidClose(_ webView: WKWebView) {destroyCurrentWebView()}// An example of methods to create a WebViewfunc createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {let webView = WKWebView(frame: frame, configuration: configuration)// Set delegatewebView.uiDelegate = selfwebView.navigationDelegate = self// Add to the layoutself.view.addSubview(webView)// Add to the list of WebViewsself.webViews.append(webView)// Add other views to optimize for a service environmentreturn webView}// an example of methods to delete a WebViewfunc destroyCurrentWebView() {// Remove a WebView from the layout abd list of WebViewsself.webViews.popLast()?.removeFromSuperview()}}